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
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

  • By
    dwProgressBar v2: Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

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!