Use a Submit Button Outside of a Form!

By  on  

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:

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

Recent Features

Incredible Demos

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    Introducing MooTools ScrollSidebar

    How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I've created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you...

Discussion

  1. I had never heard about it. In 20 years as a web developer.
    That’s why it’s so exciting, even the most “basic” language as html ;)
    So… thanks I guess.

  2. 7nz

    Never heard that attribute,Thanks

  3. You can do the same thing with inputs. Just add the form attribute!

    I do this to place inputs across several cards. :)

  4. Thomas M

    Holimoli, hours of working out in JS why FF does not allow submit events anymore. Then a pur HTML solution! 22 Years webdev, you never stop learning the basics. Many Thanks!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!