Submit button outside the form


How to use a submit button outside a HTML form

4 Dec, 2022 · 1 min read

The other day I had quite a weird scenario where we had a form inside a specific section, but the submit button was at the bottom.

At first, I tried to re-configure the HTML so that the button would be part of the form element. However, that quickly became an HTML soup.

So I decided to research other options and learned (after many years of being a developer) that you can place submit buttons outside a form!

Let’s take a look at that.

Submit button outside a form

To achieve this, we should use the following markup.

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />

<button type="submit" form="newsletterForm">Submit!</button>

As you can see, the button is not part of the form, yet this will work.

This is because we used the form attribute on our button. In it, we define which form this button belongs to.

You can also try it out in this CodePen.

Note: You will see a “Not Found” page, as our form doesn’t go anywhere.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

HTML fallback images on error

6 Aug, 2022 · 2 min read

HTML fallback images on error

Join 2099 devs and subscribe to my newsletter