Last week on Twitter, Coding Journey asked:
Question: If we are preventing default behavior of form submission and manually handle it (e.g. with Fetch API), is there a reason to use the
<form>tag? (other than form submission with enter/return key…)
When I first started my journey to web development, I had the same question.
Quick side note: I love when people ask questions that you’re worried are obvious to everyone else. Often, there’s other people who are wondering the same thing but they’re just too afraid to ask.
There are two reasons why you should still use a
- It makes your life easier.
- Semantics (and the accessibility that happens as a result).
form element makes your life easier
Consider a set of fields without a
<label for="username">Username</label> <input type="text" id="username"> <label for="password">Password</label> <input type="password" id="password"> <button id="signin">Sign In</button>
You can listen for clicks on the
But that’s not the only way someone can submit a form. They could focus on the
button and hit the space bar. They could press the
enter key from any field in the form.
Now you’re looking at at least three different event listeners to properly listen for form submissions.
One event listener to rule them all
Let’s wrap the fields in a
form element with the
#signin ID instead.
<form id="signin"> <label for="username">Username</label> <input type="text" id="username"> <label for="password">Password</label> <input type="password" id="password"> <button>Sign In</button> </form>
With this setup, you can attach a
submit event to the
#signin form, and it will fire in any of those situations.
Whether users click the button, use the space bar to press it, or hit the
Semantics and accessibility
The second reason is semantics.
If something is a form, use a
form element. This helps assistive devices like screen readers better understand the content of the page and give the person using them more meaningful information.
There’s really not much else to say here. If something is a form, use the