šŸŽ Checkout my Learn React by Making a Game course and get 1 month Free on 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.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *