TIL - Submitting a form from an external button

Arranging form elements to fit inside the form itself has always been a small-scale nightmare, as design and UX does not always comply with HTML specs 😃

But thanks to a tweet I discovered that this is no longer the case:

🔥 You can submit forms from a button outside of the form tag by using the form attribute pic.twitter.com/72pjoWu5Ll

— Miguel Piedrafita (@m1guelpf) November 22, 2020

So now we can write something like this and it will still handled as a single form by the browser:

1
2
3
4
5
6
7
8
9

<form id="myForm">
    <label for="field1">Input something: </label><input type="text" name="field1" id="field1" value=""> 
</form>
<button type="submit" form="myForm" name="action" value="publish"> Publish </button>

<label form="myForm">
    Your Email 
    <input form="myForm" type="email" name="email" id="email" value=""> 
</label>

This is a HTML specification supported everywhere except IE (but you have finally being able to drop IE, right?)