HTML Forms and Inputs | HTML5 Tutorial for Beginners

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:

πŸ”— Starter Source Code: https://github.com/gitdagray/html_course/tree/main/08_lesson

πŸ“¬ 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/detail/dark-new-tab/kcphhkbdlfggickaoeiahdcfhagfbajl?hl=en
Visual Studio Code (VS Code): https://code.visualstudio.com/
Prettier VS Code Extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
W3C HTML Validator: https://validator.w3.org/
HTML5 Outliner: https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

πŸ“š References:
MDN HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML Entities Character Chart: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

πŸš€ Semantic HTML References:
MDN Web Glossary for Semantics: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
w3Schools Semantic HTML: https://www.w3schools.com/html/html5_semantic_elements.asp
MDN Document and website structure: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

πŸš€ HTML Table References:
MDN Table Basics: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
MDN Advanced Tables and Accessibility: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

πŸš€ HTML Forms References:
MDN Web Forms: https://developer.mozilla.org/en-US/docs/Learn/Forms
MDN Form Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

βœ… Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

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

#html #html5 #forms

You May Also Like