HTML formaction Attribute

What You’ll Learn

The formaction attribute in HTML is a powerful tool that lets developers specify the URL where form data should be sent when a particular submit button is clicked. Applied to <button> or <input type="submit"> elements, it overrides the form’s default action for that one submission.

Purpose of formaction

The primary purpose of the formaction attribute is to give developers more flexibility in handling form submissions. Instead of always sending data to the URL in the form’s action attribute, you can set a different destination URL for a specific submit button or input.

This is useful when one form collects shared data but different buttons should trigger different server handlers—for example, “Save draft” vs “Publish,” or “Approve” vs “Reject.”

📝 Syntax

Add formaction to a submit button or submit input with a URL value:

<form action="/default-handler" method="post">
  <input type="submit" value="Default">
  <input type="submit" value="Custom" formaction="/custom-handler">
</form>

Syntax Rules

• Valid on submit buttons: <button type="submit">, <input type="submit">, and <input type="image">.
• Value is a URL string (absolute or relative to the current document).
• Overrides the parent form’s action only for that button’s submission.
• Works together with formmethod and formenctype for full per-button control.

💎 Values

The formaction attribute accepts a URL as its value, allowing you to define a specific endpoint for the form submission. The specified URL overrides the form’s default action only for the button or input to which formaction is applied.

• formaction="/custom-handler" — Relative URL on the same site
• formaction="https://api.example.com/save" — Absolute URL to another origin
• formaction="/drafts/save" — Different path for a “Save draft” button

<!-- Relative URL -->
<button type="submit" formaction="/archive">Archive</button>

<!-- Absolute URL -->
<button type="submit" formaction="https://example.com/webhook">Send</button>

Applicable Elements

Form action vs formaction

Examples Gallery

Two submit buttons with different endpoints, save vs publish pattern, and dynamic formaction with JavaScript.

<form action="/default-handler" method="post">
  <input type="text" name="username" placeholder="Enter your username">

  <input type="submit" value="Submit to Default Handler">
  <input type="submit" value="Submit to Custom Handler" formaction="/custom-handler">
</form>

<form action="/articles/publish" method="post">
  <textarea name="body" required></textarea>

  <button type="submit" formaction="/articles/draft">Save Draft</button>
  <button type="submit">Publish</button>
</form>

<button type="submit" id="dynamicButton">Submit</button>

<script>
  document.getElementById("dynamicButton").formaction = "/custom-handler";
</script>

♿ Accessibility

• Label buttons clearly — When multiple submit buttons exist, use distinct text like “Save draft” and “Publish” so users know what each does.
• Do not rely on color alone — Destructive actions (e.g. delete) need explicit labels, not just red styling.
• Announce consequences — For irreversible actions, consider a confirmation step in addition to a separate formaction URL.
• Keep a sensible default — The primary action should usually use the form’s default action without requiring JavaScript.

💡 Best Practices