Use a Submit Button Outside of a Form!

Have you ever felt like you’ve been a professional developer or designer forever, and somehow not known something basic, and borderline hate yourself? That’s me with a trick that was introduced to me by Miguel Piedrafita:

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

To submit a form when the button isn’t a child of the parent form, you can use the form attribute:

<form id="myForm">
    <label for="email">Email:</label>
    <input type="email" name="email" placeholder="Email" />
</form>

<!-- Submit button not in parent form! -->
<button type="submit" form="myForm">Submit!</button>

I’m ashamed I didn’t know about this form attribute. In that past I’ve executed CSS magic tricks to accomplish buttons displaying outside of their form area. Did you know about this attribute?!

The post Use a Submit Button Outside of a Form! appeared first on David Walsh Blog.