El atributo formAction en HTML

Ver ejemplo Descargar

HTML cuenta con una gran cantidad de elementos y así como atributos, alguno de ellos más útiles que otros según la situación y otros bastante desconocidos de los cuales poco se habla; hoy les traigo un desconocido para muchos llamado formAction.

Cuando trabajas con formularios HTML, tarde o temprano aparece un caso curioso: necesitas más de un botón de envío, y cada uno debe mandar los datos a una URL distinta. La mayoría de la gente lo resuelve con JavaScript cambiando el action, pero existe un atributo poco conocido que lo hace mucho más limpio: formAction.

La primera vez que lo usé me sorprendió lo útil que puede ser, sobre todo porque casi nadie habla de él y pasa completamente desapercibido. Así que aquí te cuento cómo funciona, cuándo conviene usarlo y cómo evitar errores típicos.

Qué es el atributo formAction y por qué casi nadie lo usa

formAction es un atributo que puedes aplicar a inputs tipo submit y que sobrescribe el atributo action del <form> cuando ese botón es el que dispara el envío.

En otras palabras:

• El formulario tiene un action por defecto.
• Pero un submit con formaction="otra-url" ignora ese action y manda los datos a su propia URL.

La primera vez que lo usé fué precisamente porque no quería reescribir el action con JavaScript cada vez que el usuario elegía una opción. Y ahí fue cuando me di cuenta de que el atributo ya existía… solo que nadie lo usa.

Relación entre formAction y action

• Si el formulario tiene action="/uno", es la URL principal.
• Pero si un botón tiene formaction="/dos", ese botón manda a “/dos”, no a “/uno”.

Cómo funciona en inputs tipo submit

• formAction solo funciona en:
  • <input type="submit">
  • <button type="submit"> (sí, también funciona aquí)

No funciona en inputs de otro tipo.

Cuándo conviene usar formAction: casos prácticos reales

En mi caso, lo uso cuando quiero simplificar la lógica del formulario y evitar depender de scripts extra. Te dejo los escenarios donde más brilla:

1. Formularios con múltiples botones submit

Ejemplo típico:

• “Guardar borrador”
• “Publicar”
• “Guardar y continuar”

Cada acción puede tener su propio endpoint.

2. Cuando no quieres reescribir action desde JavaScript

Llegué a usar JavaScript para actualizar action en tiempo real, pero quedaba poco limpio. Con formAction, simplemente no hace falta.

3. Envíos a diferentes controladores o rutas

Si trabajas con frameworks tipo PHP, Laravel, Node, Django, etc., puedes enviar al controlador correspondiente según la acción elegida lo cual es extremadamente útil para formularios dinámicos.

Funciona tanto con GET como con POST.

Ejemplo básico de formAction en HTML (paso a paso)

El formAction aplicable a inputs tipo submit sobrescribir el atributo action del formulario en el cual se encuentra contenido lo cual es una función bastante particular y útil dada las circunstancias:

    <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>

Si presionamos el primer "Submit" del formulario:

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

La petición será manejada por el programa que maneja la URI controlador1 la cual esta especificada en el atributo action del formulario.

Si por el contrario presionamos el segundo "Submit" del formulario:

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

La petición será manejada por el programa que maneja la URI controlador2 y esto es gracia al atributo formAction que permite sobrescribir la URI del atributo action del elemento form que conforma el formulario.

Y esto es básicamente todo, seguramente puede resultar útil para mostrar/ocultar algunos inputs tipo submit del formulario con JavaScript al estar presente ciertos valores y evitar sobrescribir el atributo action del formulario mediante JavaScript.

Puedes probar el ejemplo anterior en el siguiente enlace:

Ver ejemplo Descargar

Errores comunes al usar formAction y cómo evitarlos

1. Usarlo en elementos no compatibles
   1. ❌ No funciona en <input type="button">
   2. ❌ Tampoco en <a> o en <div> (aunque algunos lo intentan)
2. Problemas con validación
   1. Si usas formmethod="get" en un botón y method="post" en el formulario, pueden surgir inconsistencias. Siempre revisa cuál se aplica.
3. Rutas incorrectas en producción
   1. Más de una vez me pasó que localmente /controlador2 funcionaba, pero en producción exigía la ruta completa.
   2. Si tu hosting cambia el path, usa rutas absolutas.

Buenas prácticas al trabajar con formAction

• Accesibilidad y UX
  • Si tienes múltiples botones con acciones distintas, etiqueta cada uno claramente. He visto formularios donde todos dicen “Enviar”, y eso confunde.
• Cuándo preferir un solo submit + lógica en el servidor
  • Si tienes demasiadas acciones, puede ser más sencillo:
    1 botón submit → el servidor decide qué hacer según el valor enviado.
• Mantén el HTML limpio
  • Una ventaja de formAction es evitar scripts innecesarios. Úsalo cuando ayude a mantener el formulario simple y entendible.

Ejemplo 2: formulario con dos envíos y comportamientos diferentes

Aquí un caso más realista (alguna vez lo implementé en un panel de administración):

<form action="/guardar-borrador" method="post">
 <input type="text" name="titulo" required>
 <textarea name="contenido"></textarea>
 <button type="submit">Guardar borrador</button>
 <button
   type="submit"
   formaction="/publicar"
   formmethod="post"
 >Publicar ahora</button>
</form>

• Botón 1 → guarda sin publicar
• Botón 2 → publica directamente

Con esto evité reescribir action con JS y el formulario quedó muchísimo más claro.

Preguntas frecuentes sobre formAction en HTML

• ¿formAction funciona en <button>?
  • Sí, siempre que sea type="submit".
• ¿Qué pasa si no hay action en el formulario?
  • formAction sigue funcionando.
    Ese botón usará su propia URL sin importar que falte action.
• ¿Puedo usarlo con AJAX?
  • Si controlas el envío con JavaScript (preventDefault()), el valor de formAction no se utilizará automáticamente; tendrías que leerlo desde JS.
• ¿Funciona con APIs externas?
  • Sí. Puedes apuntar a cualquier endpoint válido.

Conclusión

formAction es de esos atributos que parecen menores, pero en la práctica te resuelven escenarios muy concretos sin tener que meter JavaScript ni duplicar formularios.

Yo lo uso cuando necesito distintas acciones según el botón presionado y quiero que el formulario siga siendo simple. Es un atributo limpio, directo y fácil de mantener, ideal para flujos con varios endpoints.

Si hasta ahora no lo usabas, seguramente después de probarlo lo vas a tener a mano para más de un proyecto.