Development

Split Form inputs with a form ID

Did you know you can split your form inputs from the form and still submit a group of inputs together as the same form? Well, you can.

Matt Reich

• 1 min read

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 formattribute 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.

Mastodon