Chris Bongers

Posted on Dec 4, 2022 • Originally published at daily-dev-tips.com

Submit button outside the form

#html #webdev #beginners

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" />
</form>

<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

Top comments (25)

Ben Sinclair • Dec 4 '22 • Edited

I think that instead of putting the button outside the form, you could put more of the rest of the page inside the form. Technically any information related to the form makes sense inside it, and if the information isn't related to the form, the question should be, "who designed this?"

I had no idea you could use a form attribute though, which is cool.

Chris Bongers • Dec 5 '22

In a best case scenario you would indeed never need this.
And in some cases we just don't have a change, we might have setup something code wise already, then product/design thinks to add a button in your header.

You're not going to wrap your entire app in a form, thus this solution might come in handy.

As described in the article, it's definitely a edge case and not a norm :)

Adam Crockett 🌀 • Dec 4 '22

Wut? I think semantically I prefer it in the form where I’d expect it to be, so wrapping the page would be my preference for that idiomatic development experience, still it’s nice to know that forms can be referenced

Chris Bongers • Dec 5 '22

100% you would always want it to be in a form, but in some edge cases it might be impossible (without refactoring your entire app) and this might come in handy.

Don't get me wrong, most people will never needs this hopefully 🙏

Adam Crockett 🌀 • Dec 5 '22 • Edited

I think had I not known about this the usual approach I would have taken would have been

btnOutsideForm.addEventHandler(“click”, () => myForm.submit());

Although that’s more JavaScript, that reminds me actually, I think a form can have more than one submit button using your html way.

Rahmath Irshad • Dec 4 '22

But what’s the benefit of using outside??

artydev • Dec 4 '22 • Edited

I had the case of having to create a button for CKEditor and did not want to create a plugin.
On clicking the button I had to upload some files.
So I created a form, hided it and submit it 'remotely'

leob • Dec 5 '22

Right, there can always be such edge cases - the fact that we can't immediately imagine the benefits doesn't mean they don't exist ...

Chris Bongers • Dec 5 '22

As mentioned below could be a good edge case.
It could also be you already created your entire app, but product/design ensist on putting a button far out of the region of the form (like a header save button)

It's definitely not the norm and one should always try to solve it with semantic form buttons.

Aaron Reese • Dec 4 '22

I suppose for aria compliance, if you had multiple forms on the page you could put all the buttons together, each referencing a different form.

leob • Dec 5 '22

I see people commenting "but why?", and yes, in a properly designed piece of code in a greenfield project there will probably totally not be any need for this ...

However, I can certainly imagine edge cases in ancient legacy/spaghetti codebases where this could come in very handy, potentially saving you from having to resort to dirty hacks or having to do a large (and risky) refactoring.

(not 100% sure but I might even already have come across examples in the past)