HTML Forms
About
Forms are more than just a way to gather information; they are the backbone of user interaction on the web. From signing into websites to searching for information, forms make these everyday actions possible. In this module, you’ll gain a deep understanding of various form elements, their functionalities, and how to optimize them for a seamless, accessible user experience.
Content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 2 min | Link | Set up the development environment. |
| Concepts | 3 min | Link | Understand the importance of HTML <form> elements in web development. |
| The Form Element | 3 min | Link | Construct a form and utilize its key attributes: action and method. |
| Input Elements and Labels | 10 min | Link | Create a form with labeled inputs. |
| Button Elements in Forms | 3 min | Link | Use a <button> to submit a form. |
| Form Validation Techniques | 12 min | Link | Add client-side form validation. |
| Accessibility in Web Forms | 7 min | Link | Understand how <labels> and placeholders differ for accessibility. |
| Total content | 40 min | – |
Level Up content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| The Select Element | 4 min | Link | Use the <select> and <option> elements. |
| Additional Elements to Enhance Accessibility | 7 min | Link | Use <fieldset> and <legend> to group controls and improve accessibility. |
| Advanced Form Validation and Feedback | 11 min | Link | Use the :valid pseudo-class for giving validation feedback. |
| Advanced Input Types | 11 min | Link | Use advanced input types like checkbox, date, password, tel, and the <datalist> element. |
| Total Level Up content | 33 min | – |