Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

Can a submit button be outside of an HTML form?

See how to put a submit button outside a HTML form.

I've ended up in a wired situation where I had a component that I could not change and it was rendering an HTML form without a submit button.

And even more, the design requested that the submit button to be placed at the bottom of the page, while the form was somewhere at the top.

So, how could I wire a newly added button to act as the submit control for an existing form? Something like this:

<form id="my-form">
  <label for="user"> šŸ§‘ā€šŸ’» USER: </label>
  <input type="text" name="user" />
</form>
<!-- content here ā•Œ> 
<button>
    šŸ¦„ Magic button that submits the form
<button>

Are submit buttons outside forms valid HTML?

The first question that popped into my mind was if this is even a valid HTML. If we can have a submit button outside its form?

Well, the answer is yes, given that anywhere in the document's body a button element is acceptable. So, we can add the submit outside of the form as long as we wire up the id of the form to that button.

How to submit a form when the button is outside the form?

It seems that any HTML button element has a form attribute. Docs here and wrote more about it here.

Using this attribute we can pass the id of the form, and voila, we have a working submit button outside of the given form:

<form id="my-form">
  <label for="user"> šŸ§‘ā€šŸ’» USER: </label>
  <input type="text" name="user" />
</form>
<!-- content here ā•Œ> 
<button form="my-form" type="submit" >
    šŸ¦„ Magic button that submits the form
<button>

It only took me 15 years of programming to learn this.

You may be also interested in working with multiple submit buttons for a form.

Home Screencasts Best of Newsletter Search X