El Atributo FORMACTION

Permite definir una URL específica para enviar los datos de un formulario cuando se utiliza un botón de envío particular.

El atributo formaction permite definir una URL específica para enviar los datos de un formulario cuando se utiliza un botón de envío particular. Es especialmente útil cuando un formulario contiene múltiples botones que deben dirigir los datos a diferentes endpoints. Aquí un tutorial detallado:

¿Qué es `formaction`?

Propósito: Sobrescribe el atributo action del formulario para un botón específico, permitiendo enviar datos a distintas URLs según el botón seleccionado.
Elementos compatibles: <input type="submit"> y <button type="submit">.
Uso típico: Formularios con acciones múltiples (ej: "Guardar borrador" y "Publicar").

Sintaxis Básica

<form id="miFormulario" action="/ruta-predeterminada" method="POST">
  <input type="text" name="titulo" placeholder="Título">
  
  <!-- Botón 1: Envía a "/guardar-borrador" -->
  <button type="submit" formaction="/guardar-borrador">Guardar borrador</button>
  
  <!-- Botón 2: Envía a "/publicar" -->
  <button type="submit" formaction="/publicar">Publicar</button>
</form>

Ejemplos Prácticos

Ejemplo 1: Envío a diferentes URLs

<form action="/accion-default" method="POST">
  <input type="email" name="correo" placeholder="Correo">
  
  <button type="submit" formaction="/suscribir">Suscribir</button>
  <button type="submit" formaction="/cancelar">Cancelar suscripción</button>
</form>

Ejemplo 2: Combinar con `formmethod`

Cambia el método HTTP según el botón:

<form action="/editar" method="POST">
  <input type="text" name="id" value="123" hidden>
  
  <!-- Envía una solicitud PUT a "/actualizar" -->
  <button 
    type="submit" 
    formaction="/actualizar" 
    formmethod="PUT"
  >
    Actualizar
  </button>
</form>

Casos de Uso Comunes

Guardar vs. Publicar: Un botón guarda un borrador, otro publica el contenido.
Acciones de edición/eliminación: Enviar a rutas como /editar o /eliminar.
Procesos multipaso: Dirigir a diferentes pasos en un formulario largo.

Consideraciones Clave

Sobrescribe solo action: El atributo formaction no afecta al method o enctype del formulario, a menos que se combinen con formmethod o formenctype.
Accesibilidad: Etiqueta los botones claramente (ej: "Guardar", "Enviar").
Validación HTML5: Los campos requeridos se validan antes de enviar, independientemente del formaction.

Soporte en Navegadores

Navegadores modernos: Chrome, Firefox, Safari, Edge (versiones actuales).
Navegadores antiguos: IE11 y versiones anteriores no lo soportan.

Buenas Prácticas

Usa type="submit" en los botones: Los botones sin este tipo no activarán formaction.
Prueba en múltiples navegadores: Asegúrate de que las URLs funcionen correctamente.
Manejo en el servidor: Configura endpoints para procesar las acciones específicas (ej: /guardar-borrador y /publicar).

Errores Comunes

Error 1: Olvidar `type="submit"`

<!-- Incorrecto: No activará formaction -->
<button formaction="/ruta">Botón</button>

<!-- Correcto -->
<button type="submit" formaction="/ruta">Botón</button>

Error 2: URLs mal escritas

<!-- Incorrecto: Falta la barra inicial en la ruta -->
<button type="submit" formaction="ruta-invalida">Enviar</button>

Ejemplo Completo: Formulario de Blog

<form action="/post-default" method="POST">
  <input type="text" name="titulo" placeholder="Título del post" required>
  <textarea name="contenido" placeholder="Contenido..." required></textarea>
  
  <!-- Botones con acciones distintas -->
  <button type="submit" formaction="/guardar-borrador">Guardar borrador</button>
  <button type="submit" formaction="/publicar-post">Publicar ahora</button>
</form>

Conclusión

El atributo formaction brinda flexibilidad para manejar múltiples acciones dentro de un mismo formulario, mejorando la experiencia del usuario y la organización del código. Ideal para aplicaciones que requieren envíos condicionales o acciones específicas por botón.

¿Qué es formaction?