Forms are everywhere on the web. We use forms to do all kind of activities like logging into a system, sending messages and files, answering quizzes and a lot more. This is why understanding how to create forms is important. Not just for developers but for UX engineers and designers as well.
Forms exist from the first day HTML was created. HTML5 introduced a lot of new features to the forms (native validation, new input types)
In this series we will explore everything related to forms like:
- How to leverage semantic HTML to create intuitive and accessible forms
- How to style forms using CSS
- How to enforce client side validation using HTML5 APIs
- What are the common practices and pitfalls we should be aware of when we create forms
Forms are important to web applications and web development. There is a lot of techniques and tricks people are missing when they work with forms. With the rise of the modern frontend frameworks, most of the developers I met are caring less about forms and do a lot of bad practices. That's not the fault of the frameworks though, it might be due to the forgiving nature of the web or the availability of learning resources.
For example, one of the tasks we give to junior developers applying to my company is an HTML form. We asked them to do the changes they see necessary and ask them to add validation for a couple of fields. Most of the submissions were:
- unable to spot invalid HTML (like duplicate IDs),
- unable to bind labels to inputs properly or not using labels at all,
- unable to use validation without JavaScript (like required, proper input types ... etc)
This is why I saw an opportunity to try to fill this gap.