Using HTML buttons and inputs with the form, form-method and form-action attributes

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

You can read more about it here , here or here.

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


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X