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

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Modal-Style Text Selection with Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog 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!