The formAction attribute in HTML

View example Download

HTML has a large number of elements and attributes, some of them more useful than others depending on the situation, and others quite unknown and rarely discussed; today I bring you one unknown to many called formAction.

When you work with HTML forms, sooner or later a curious case appears: you need more than one submit button, and each one must send the data to a different URL. Most people solve this with JavaScript by changing the action, but there is a little-known attribute that makes it much cleaner: formAction.

The first time I used it, I was surprised by how useful it can be, especially since almost no one talks about it and it goes completely unnoticed. So here I tell you how it works, when it is convenient to use it, and how to avoid typical errors.

What the formAction attribute is and why almost no one uses it

formAction is an attribute that you can apply to submit type inputs and that overwrites the action attribute of the <form> when that button is the one that triggers the submission.

In other words:

• The form has a default action.
• But a submit with formaction="another-url" ignores that action and sends the data to its own URL.

The first time I used it was precisely because I didn't want to rewrite the action with JavaScript every time the user chose an option. And that's when I realized that the attribute already existed... only no one uses it.

Relationship between formAction and action

• If the form has action="/one", that is the main URL.
• But if a button has formaction="/two", that button sends to “/two”, not to “/one”.

How it works on submit type inputs

• formAction only works on:
  • <input type="submit">
  • <button type="submit"> (yes, it works here too)

It does not work on other types of inputs.

When to use formAction: real practical cases

In my case, I use it when I want to simplify the form logic and avoid relying on extra scripts. Here are the scenarios where it shines most:

1. Forms with multiple submit buttons

Typical example:

• “Save Draft”
• “Publish”
• “Save and Continue”

Each action can have its own endpoint.

2. When you don't want to rewrite action from JavaScript

I used to use JavaScript to update action in real-time, but it ended up being messy. With formAction, it's simply not necessary.

3. Submissions to different controllers or routes

If you work with frameworks like PHP, Laravel, Node, Django, etc., you can send to the corresponding controller based on the chosen action, which is extremely useful for dynamic forms.

It works with both GET and POST.

Basic example of formAction in HTML (step-by-step)

The formAction applicable to submit type inputs overwrites the action attribute of the form in which it is contained, which is a very particular and useful function given the circumstances:

    <form action="controlador1">
      Nombre: <input type="text" name="nombre"><br>
      Apellido: <input type="text" name="apellido"><br>
      <input type="submit" value="Submit 1"><br>
      <input type="submit" value="Submit 2" formaction="controlador2" >
    </form>

If we press the first "Submit" of the form:

<input type="submit" value="Submit 1">

The request will be handled by the program that handles the URI controlador1 which is specified in the action attribute of the form.

If, on the contrary, we press the second "Submit" of the form:

<input type="submit" value="Submit 2" formaction="controlador2">

The request will be handled by the program that handles the URI controlador2 and this is thanks to the formAction attribute that allows overwriting the URI of the action attribute of the form element that makes up the form.

And that is basically all, it can surely be useful for showing/hiding some submit type inputs of the form with JavaScript when certain values are present and avoiding overwriting the action attribute of the form using JavaScript.

You can test the previous example at the following link:

View example Download

Common errors when using formAction and how to avoid them

1. Using it on unsupported elements
   1. ❌ It doesn't work on <input type="button">
   2. ❌ Nor on <a> or on <div> (although some try)
2. Validation problems
   1. If you use formmethod="get" on a button and method="post" on the form, inconsistencies may arise. Always check which one applies.
3. Incorrect routes in production
   1. More than once it happened to me that locally /controlador2 worked, but in production it required the full path.
   2. If your hosting changes the path, use absolute paths.

Best practices when working with formAction

• Accessibility and UX
  • If you have multiple buttons with different actions, label each one clearly. I've seen forms where they all say "Submit," and that's confusing.
• When to prefer a single submit + server-side logic
  • If you have too many actions, it may be simpler:
    1 submit button → the server decides what to do based on the submitted value.
• Keep the HTML clean
  • An advantage of formAction is avoiding unnecessary scripts. Use it when it helps keep the form simple and understandable.

Example 2: form with two submissions and different behaviors

Here is a more realistic case (I once implemented it in an administration panel):

<form action="/save-draft" method="post">
    <input type="text" name="titulo" required>
    <textarea name="contenido"></textarea>
    <button type="submit">Save Draft</button>
    <button
        type="submit"
        formaction="/publish"
        formmethod="post"
    >
        Publish now
    </button>
</form>

• Button 1 → saves without publishing
• Button 2 → publishes directly

With this I avoided rewriting action with JS and the form became much clearer.

Frequently Asked Questions about formAction in HTML

• Does formAction work on <button>?
  • Yes, as long as it is type="submit".
• What happens if there is no action on the form?
  • formAction still works.
    That button will use its own URL regardless of whether the action is missing.
• Can I use it with AJAX?
  • If you control the submission with JavaScript (preventDefault()), the formAction value will not be used automatically; you would have to read it from JS.
• Does it work with external APIs?
  • Yes. You can point to any valid endpoint.

Conclusion

formAction is one of those attributes that seem minor, but in practice they solve very specific scenarios without having to add JavaScript or duplicate forms.

I use it when I need different actions depending on the button pressed and I want the form to remain simple. It is a clean, direct, and easy-to-maintain attribute, ideal for flows with multiple endpoints.

If you haven't used it until now, you will surely keep it handy for more than one project after trying it.