What is formaction attribute in html

HtmlConceptBeginner · 3 min read

What is the formaction Attribute in HTML: Explained with Examples

The formaction attribute in HTML specifies the URL where the form data should be sent when a particular submit button is clicked. It overrides the form's default action URL for that button only, allowing multiple submission targets within one form.

⚙️

How It Works

Imagine you have a form like a letter you want to send. Normally, you send it to one address written on the envelope. The formaction attribute lets you put different addresses on different envelopes inside the same form. When you click a specific submit button, the form data goes to the address set by that button's formaction, not the main form's action.

This means you can have one form but send its data to different places depending on which button you press. It's like choosing different mailboxes for the same letter depending on the button you click.

💻

Example

This example shows a form with two submit buttons. Each button sends the form data to a different URL using the formaction attribute.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formaction Example</title>
</head>
<body>
  <form action="/default-submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br><br>
    <button type="submit" formaction="/submit-to-a">Submit to A</button>
    <button type="submit" formaction="/submit-to-b">Submit to B</button>
  </form>
</body>
</html>

Output

A form with a text input labeled 'Name' and two buttons: 'Submit to A' and 'Submit to B'. Clicking each button sends the form data to different URLs.

🎯

When to Use

Use the formaction attribute when you want one form to send data to different places depending on user choice. For example:

In a survey, one button might save answers as a draft, another submits final answers.
In an order form, one button could send data to payment processing, another to save the order for later.
When testing different endpoints without making multiple forms.

This helps keep your page clean and user-friendly by avoiding duplicate forms.

✅

Key Points

Overrides form's action: Only for the button it is on.
Works with submit buttons: <button> or <input type="submit">.
Supports different URLs: Allows multiple submission targets.
Improves UX: One form, many actions.

✅

Key Takeaways

The formaction attribute sets a custom URL for form submission on a specific button.

It overrides the form's default action only when that button is clicked.

Use it to send the same form data to different places without multiple forms.

It works on submit buttons like

Helps create cleaner, more flexible forms with multiple submission options.