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
    Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out...

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

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. :)

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