Use a Submit Button Outside of !

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

You might also like

Not All Advice is Good Advice

Image Optimization Strategies Compared

Regular Expression Match Groups

— 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?!