HTML formaction Attribute

HTML formaction Attribute

The HTML formaction attribute specifies the URL used to process a form submission when a particular submit button is activated. It overrides the action attribute of the button's associated <form> element, allowing different submit buttons in the same form to send the form data to different destinations.

Syntax

The value of the formaction attribute is a non-empty URL that specifies where the form data should be submitted when that submit button is used.

<button type="submit" formaction="save.php">Save</button>

The attribute can also be used with an <input> element when its type is submit or image.

<input type="submit" value="Save" formaction="save.php">

Elements That Use the formaction Attribute

The formaction attribute is used on submit buttons that can initiate a form submission.

Overriding the Form action

A form normally submits its data to the URL specified by its action attribute. When the activated submit button has a formaction attribute, that URL is used instead.

<form action="submit.php" method="post">
  <input type="text" name="message">
  <button type="submit">Submit</button>
  <button type="submit" formaction="preview.php">Preview</button>
</form>

Selecting the Submit button sends the form data to submit.php, while selecting the Preview button sends the same form data to preview.php.

Using Multiple Submit Buttons

The formaction attribute is useful when one form needs multiple submission destinations. Each submit button can specify its own URL without requiring separate forms.

<form action="save.php" method="post">
  <input type="text" name="title">
  <button type="submit">Save</button>
  <button type="submit" formaction="preview.php">Preview</button>
  <button type="submit" formaction="publish.php">Publish</button>
</form>

The form's action URL is used by the Save button, while the other buttons override it with their own formaction values.

Form Association

A submit button using formaction must have a form owner for the attribute to affect a form submission. The button can be inside the form or associated with a form using the form attribute.

<form id="article-form" action="save.php" method="post">
  <input type="text" name="title">
</form>

<button type="submit" form="article-form" formaction="publish.php">Publish</button>

Although the button is outside the form, form="article-form" associates it with that form, and formaction="publish.php" supplies the submission URL when the button is activated.

Related Form Attributes

The formaction attribute is one of several attributes that allow a submit button to override submission settings defined by its form.

Common Mistakes

Do not use formaction on ordinary input controls such as <input type="text">. For <input>, it applies to the submit and image states.

Do not confuse formaction with the action attribute. The action attribute defines the form's normal submission URL, while formaction provides an override for an individual submit button.

A formaction attribute on a submit button without a form owner does not cause a form submission by itself.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The formaction attribute is widely supported on submit-capable <button> and <input> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the formaction Attribute

The example contains two submit buttons. The first uses the form's normal action, while the second uses formaction to send the same form data to a different result page.

Summary

The HTML formaction attribute specifies an alternate URL for a form submission initiated by a particular submit button. It overrides the associated form's action attribute and can be used with submit <button> elements and <input> elements in the submit or image state.