HTML Forms and Inputs | HTML5 Tutorial for Beginners

Veröffentlicht am: 18 Januar 2022
auf dem Kanal: Dave Gray
55,410
1.1k

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

HTML forms and inputs can be confusing for beginners. In this tutorial, you will learn about HTML forms and many HTML5 inputs and attributes. Adding forms to your web pages make them interactive for your users.

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 This lesson is part of an HTML for Beginners tutorial series playlist:
   • HTML Tutorials for Beginners  

🔗 Starter Source Code: https://github.com/gitdagray/html_cou...

📬 Course Updates ➜ https://courses.davegray.codes/

HTML Forms and Inputs | HTML5 Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:25) Forms make your pages interactive
(01:11) Adding a new anchor link
(01:56) Adding a new article element
(03:24) Form element
(04:19) Text input
(08:48) Adding a 2nd text input
(10:00) Wrapping inputs in block elements
(10:40) Password input
(12:08) tel input
(14:36) Number input
(16:55) Select, option and optgroup elements
(23:28) Datalist
(26:03) Adding semantics with fieldset and legend
(27:39) Radio buttons
(30:51) Checkboxes
(33:22) Textarea
(35:43) Email and other inputs
(36:02) Button elements
(38:45) Submitting the form
(40:45) Last button, Post vs Get Requests
(44:26) Validate your HTML

🔗 All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course

⚙ Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Dark New Tab Chrome Extension: https://chrome.google.com/webstore/de...
Visual Studio Code (VS Code): https://code.visualstudio.com/
Prettier VS Code Extension: https://marketplace.visualstudio.com/...
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/...
Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
W3C HTML Validator: https://validator.w3.org/
HTML5 Outliner: https://chrome.google.com/webstore/de...

📚 References:
MDN HTML: https://developer.mozilla.org/en-US/d...
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/d...
HTML Entities Character Chart: https://html.spec.whatwg.org/multipag...

🚀 Semantic HTML References:
MDN Web Glossary for Semantics: https://developer.mozilla.org/en-US/d...
w3Schools Semantic HTML: https://www.w3schools.com/html/html5_...
MDN Document and website structure: https://developer.mozilla.org/en-US/d...

🚀 HTML Table References:
MDN Table Basics: https://developer.mozilla.org/en-US/d...
MDN Advanced Tables and Accessibility: https://developer.mozilla.org/en-US/d...

🚀 HTML Forms References:
MDN Web Forms: https://developer.mozilla.org/en-US/d...
MDN Form Element: https://developer.mozilla.org/en-US/d...

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven  

Was this tutorial about creating HTML Forms helpful? If so, please share. Let me know your thoughts in the comments.

#html #html5 #forms


Auf dieser Seite können Sie das Online-Video HTML Forms and Inputs | HTML5 Tutorial for Beginners mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Dave Gray 18 Januar 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 55,410 Mal angesehen und es wurde von 1.1 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!