The default way you would wite an HTML form would be like this:
<form action="/action_page.php" method="get" id="form1">
<!-- your form inputs here -->
<button type="submit">
</form>
This will submit the form to the /action_page.php
via a get
method. And also the submit button has to be included in the actual HTML form.
However we can have a button that submits a form in whatever place we want on the page. The association is done through the id
of the form.
<form id="form1" action="/action_page.php">
<!-- your form inputs here -->
</form>
<!-- Far away in the DOM -->
<button form="form1" formaction="/postToTwitter.php" formmethod="POST">Post Twitter</button>
<button form="form1" formaction="/sendOnSlack.php" formmethod="GET">Share on Slack</button>
One cool thing is that we can use the formmethod
and the formaction
attributes to send the data to multiple endpoints with different methods. See the above example.
Another advantage of the form attributes on buttons is that we have better CSS styling and control. There is no need anymore to place the button inside the actual form element so we can style things however we want.
Not just the buttons accept these attributes, but also the input
elements.
It is currently supported in all modern browsers. Of course, Internet Explorer is not included in the modern browsers category 😀 .
📖 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.