How to Build HTML Forms Right: Semantics

Forms are arguably the most important parts of any web application. Without forms, we would not have sites like Google, Facebook, Amazon, Reddit, etc. However, the more I browse the web, the more I see poor implementations of forms.

In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way. The series is broken up into the following parts:

• Part 1: Semantics
• Part 2: Accessibility
• Part 3: Custom Styles
• Part 4: User Experience
• Part 5: Security

Starting with proper semantics makes the most sense because, as we will see through the series, semantics will play a role in every other section. It’s also most likely the starting point when you begin coding. So let’s get started

Start With A Form

First and foremost, any time we are working with some sort of user input, we should begin with a tag. Some folks working with JavaScript may choose to omit the <form> tag because the form submission can be handled with an AJAX request, but this is a mistake. Not the AJAX part, but leaving out the <form> tag.