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 tri...
For further actions, you may consider blocking this person and/or reporting abuse
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
formattribute though, which is cool.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 :)
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
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 🙏
I think had I not known about this the usual approach I would have taken would have been
Although that’s more JavaScript, that reminds me actually, I think a form can have more than one submit button using your html way.
But what’s the benefit of using outside??
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'
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 ...
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.
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.
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)
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.
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!
Ah just to late, but at least now you have it for next time 🙏
good one
Nice tip 🚀
Nice tip thanks 👍
Nice hack, didn‘t know about that one.
Nice tip ✨
I had the same problem with symfony using twig.
Nice tip,so when we use this method?
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.
This is good to know but there are still other ways to solve this problem.
What other ways would you suggest?
Nice tip!
I knew this was going to come in handy some day :) and it finally did today, hahaha