Split Form inputs with a form ID

Here’s an HTML tip for ya’ll. Did you know that you can separate the inputs of a form from the form itself (with regard to the markup) and as long as you connect the form ID to a form attribute on an input they’ll all submit with that form. So you don’t actually need to wrap all of your inputs in a element.

The browser support for using that form attribute is great as well.

Something like this will work:

<form id="my-form">
  <label for="fav_color">Favorite Color: </label>
  <input type="text" name="fav_color" id="fav_color" />

  <button>Submit</button>
</form>

<!-- This will get submitted with the rest of the form -->
<label for="fav_name">Favorite Matt: </label>
<input type="text" name="fav_matt" id="fav_matt" form="my-form" />

I’ve been doing this stuff for quite a while and have written more forms that I can count and this was new to me. Pretty sure it’s been a part of the spec for a very long time too. I’m both annoyed and excited by this new knowledge.