DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Submit button outside the form
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Submit button outside the form

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>
Enter fullscreen mode Exit fullscreen mode

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 (24)

Collapse
 
moopet profile image
Ben Sinclair • Edited on

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
adam_cyclones profile image
Adam Crockett

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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 πŸ™

Collapse
 
adam_cyclones profile image
Adam Crockett • Edited on

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

btnOutsideForm.addEventHandler(β€œclick”, () => myForm.submit());
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
rahmathirshad profile image
Rahmath Irshad

But what’s the benefit of using outside??

Collapse
 
artydev profile image
artydev • Edited on

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'

Collapse
 
leob profile image
leob

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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.

Collapse
 
aarone4 profile image
Aaron Reese

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.

Collapse
 
leob profile image
leob

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)

Collapse
 
dailydevtips1 profile image
Chris Bongers

There are indeed some edge cases, in 99% of the time one should be able to simply use buttons inside a form.

However like you said, it's not always possible and for that 1% we got this amazing solution at our disposal.

Collapse
 
chipheadmike profile image
Michael Williams

I just finished a project where this would have been exactly what I needed. I ended up basically doing a work around. Great tip for this beginner!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah just to late, but at least now you have it for next time πŸ™

Collapse
 
ranjitodedra profile image
Ranjit Odedra

good one

Collapse
 
fariasmateuss profile image
Mateus V. Farias

Nice tip πŸš€

Collapse
 
surajaswaldev profile image
Suraj Aswal

Nice tip thanks πŸ‘

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’»

Nice hack, didnβ€˜t know about that one.

Collapse
 
mattyasyahya profile image
matt_

Nice tip,so when we use this method?

Collapse
 
dailydevtips1 profile image
Chris Bongers

Only in edge cases, there is one described with CKEditor above, which makes sense.
Another example would be when you have a modal, but the button is also reflected outside the modal. (And perhaps unsolvable with CSS)

It's definitely are rare occurence and in 99% of the time semantic form use would be the preferred way of solving this.

Collapse
 
ghassenhnid profile image
Ghassen HNID

Nice tip ✨
I had the same problem with symfony using twig.

Collapse
 
fridaycandours profile image
Friday candour

This is good to know but there are still other ways to solve this problem.

Collapse
 
dailydevtips1 profile image
Chris Bongers

What other ways would you suggest?

Collapse
 
acode123 profile image
acode123

Nice tip!

New programmer and javascript

Stop by this week's meme thread!