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