Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • 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...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

Discussion

  1. Eroan

    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. Hal Gumbert

    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!