HTML

This page explains how the HTML formaction attribute lets different submit buttons send the same form to different destinations.

Goal: understand the relationship between form action and a submit button's formaction, then use the pattern for actions such as saving a draft or publishing.

formaction

The formaction attribute overrides the owning form's action URL for the button that was pressed. It is useful when one set of inputs supports several actions.

A small example

<form action="/submit/publish" method="post">
  <label>Title <input name="title"></label>
  <button type="submit">Publish</button>
  <button type="submit" formaction="/submit/draft">Save draft</button>
  <button type="submit" formaction="/submit/preview" formtarget="_blank">Preview</button>
</form>

The first button uses the form's default action. Each other submit button uses its own formaction. An unpressed button's attribute is not used.

Important conditions

• Use formaction on a submit button: <button type="submit">, <input type="submit">, or <input type="image">.
• If a button is not associated with a form, it cannot submit that form.
• Keep the form's action as a sensible default, then override it only where the action really differs.
• formmethod, formenctype, formtarget, and formnovalidate can similarly change other submission details per button.

When should you use it?

It makes the HTML intent visible for workflows such as “Save draft”, “Preview”, and “Publish”. The server must still authenticate the user, authorize each action, validate the submitted data, and enforce business rules. Changing the button in a browser must never grant extra permission.

Related topics