What’s the advantage to using a form element over just having a bunch of controlled input fields these days?
I just use it as a convenient way to handle stuff like “enter” on form fields.
<form><input /></form>is more semantically correct than
<div><input /></div>in most cases
- html elements related to forms, such as
<legend>are expected to be in a
<form>parent, and again are more semantically correct than just making
<div class="form-legend" />
- you get the
onsubmitevent handler for forms
- browser support for forms is built-in, so that users can press Enter and it will automatically trigger the
onsubmitand simulate a click on the submit button
I think from the UX point of view your 4th point is most important - I hate when Enter doesn’t work with forms on websites.
I’m guessing semantic correctness is quite important for for people with disabilities, e.g. people with poor vision. They’re using assistive technologies, which tend to work best with rich semantic.
What if you have something that looks like a form, but has no formal submit: once the user enters data into a field that input is saved into the server. They can leave and come back to it on other machines and pick up where they left off.
Semantically, should this still be a form? Or would you make every field it’s own form? Or is it just a form that can be submitted with some fields still empty?
I always use a
<form> element, since that gives the content more accurate semantics (just as the
<article> element can give the reader better understanding of headers and paragraphs). Especially if you have multiple input elements; are these input elements somehow related? If they are part of the same form, then they are!
There is nothing wrong with not having any
<form> or having one
<form> for each
<input> element, but it makes more sense to me to use a single
<form> (given that the
<input> elements in it are related).
As long as you don’t insert a submit button, the user won’t be able to submit the form.