The HTML formaction attribute
The HTML formaction attribute sets where a form is sent when one particular submit button is clicked. It overrides the form's action for that button only, as in <button formaction="/drafts">Save draft</button>. Buttons without it keep using the form's action.
Overview
The HTML formaction attribute sets the URL a form is sent to when one specific submit button is used. It overrides the form's action attribute for that submission only, so a single form can publish with one button and save a draft with another.
It belongs on submit buttons, meaning a <button> with no type or type="submit", plus <input type="submit"> and <input type="image">. On type="button" or type="reset" it does nothing, because those never submit. The value must be a non-empty URL, and a relative path resolves against the page's base URL.
The Enter key follows its own rule. Pressing Enter in a text field submits through the form's default button, which is the first submit button in the form, so if that button has a formaction, Enter uses its URL too. Put the button you want Enter to trigger first in the markup.
Only the button that submitted the form adds its own name and value to the data. Buttons can therefore share one URL and still be told apart on the server. In JavaScript, the submit event's submitter property points to the same button.
Syntax
<form action="/posts/publish" method="post">
<label>Title <input type="text" name="title"></label>
<button>Publish</button>
<button formaction="/posts/draft">Save draft</button>
</form>Values
| Value |
|---|
| A URL. |
Example
<form id="post" action="/posts/publish" method="post">
<label for="title">Title</label>
<input type="text" id="title" name="title" value="Hello">
<button>Publish</button>
<button formaction="/posts/draft">Save draft</button>
</form>
<p id="dest">Click a button to see where the form would go.</p>
<script>
document.getElementById('post').addEventListener('submit', function (e) {
e.preventDefault();
var url = e.submitter.getAttribute('formaction') || this.getAttribute('action');
document.getElementById('dest').textContent = 'This form would be sent to ' + url;
});
</script>Best practices
- Use
formactionfor secondary actions such as Save draft or Preview. Keep the main destination on the form'saction. - Place the button that Enter should trigger first in the source, since implicit submission uses the first submit button.
- Add formmethod when the second endpoint expects a different HTTP method from the form.
- Pair a Save draft button with
formnovalidateso half-finished forms can still be saved. - Check permissions on the server for every endpoint, because anyone can edit a formaction in the browser's developer tools.
Frequently asked questions
What is the formaction attribute used for?
Can one form submit to two different URLs?
Which URL does the Enter key use when a form has formaction buttons?
Does formaction work on input type=submit?
input type=submit and input type=image as well as on button. It has no effect on type=button or type=reset, since those never submit a form.How can the server tell which formaction button was clicked?
event.submitter in JavaScript to see the same button.
