Atributo action de HTML

El atributo action de HTML especifica la URL a la que se deben enviar los datos del formulario cuando este se envía. Su valor es el destino que procesa los datos enviados — normalmente un script del lado del servidor o un endpoint.

Solo puedes usar este atributo en el elemento <form>. Cuando un usuario activa un control de envío, el navegador recopila los campos con nombre del formulario, los codifica y envía una solicitud a la dirección indicada en action. Esta página explica cómo se comporta action, qué ocurre cuando se omite, cómo interactúa con otros atributos del formulario y cómo un botón puede anularlo con formaction.

Sintaxis

<form action="URL"></form>

La URL puede ser de dos tipos:

Absoluta — una URL completa que incluye el esquema y el host, por ejemplo https://api.example.com/submit. Úsala cuando el formulario deba enviarse a un origen diferente (un dominio, subdominio o esquema distintos).
Relativa — una ruta resuelta respecto a la URL del documento actual, por ejemplo /form/submit o save.php. Esta es la opción más habitual cuando el formulario envía los datos al propio sitio.

Ejemplo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit">
      <label for="fname">Name</label>
      <input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
      <label for="lname">Surname</label>
      <input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
      <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

Pruébalo tú mismo »

Aquí usamos una ruta relativa, por lo que los datos se envían a /form/submit en el mismo dominio que la página actual. Para publicar en otro dominio, usa una URL absoluta como https://example.com/some-page.

Qué ocurre cuando se omite `action`

Si omites action (o lo estableces como una cadena vacía), el formulario se envía a la URL de la página actual. Este es un patrón válido y habitual: una página puede mostrar el formulario y también gestionar su propio envío.

<!-- Both of these submit back to the URL the form was loaded from -->
<form method="post">...</form>
<form action="" method="post">...</form>

Ten en cuenta que enviar datos a la URL actual con el método GET predeterminado añade los campos del formulario a la URL como cadena de consulta, lo que recarga la página con esos valores visibles en la barra de direcciones.

Cómo interactúa `action` con otros atributos del formulario

El atributo action nunca funciona solo — define adónde van los datos, mientras que otros atributos de <form> definen cómo llegan:

method — elige el método HTTP. Con GET (el valor predeterminado), los campos codificados se añaden a la URL de action como cadena de consulta, de modo que la URL se convierte en action?name=value&.... Con POST, los campos se envían en el cuerpo de la solicitud, manteniendo la URL limpia.
enctype — establece cómo se codifica el cuerpo y solo importa con POST. El valor predeterminado application/x-www-form-urlencoded es adecuado para texto; necesitas multipart/form-data cuando el formulario incluye una carga de archivos (<input type="file">).
target — decide dónde se muestra la respuesta, por ejemplo _self (misma pestaña, predeterminado), _blank (nueva pestaña) o el nombre de un <iframe>.

Puedes obtener más información en la referencia de la etiqueta <form> y en la guía general de formularios HTML.

URLs absolutas vs. relativas: ventajas e inconvenientes

Elegir entre una action absoluta y una relativa va más allá de una preferencia de estilo:

URLs relativas mantienen el formulario vinculado al sitio que lo sirve. Sobreviven al traslado del sitio a un nuevo dominio o al cambio entre http y https, y mantienen el envío en el mismo origen, lo que evita complicaciones entre orígenes.
URLs absolutas son necesarias cuando debes publicar en un origen diferente (por ejemplo, un gestor de formularios de terceros o un host de API separado). Sé deliberado aquí: un POST a otro origen es una solicitud de origen cruzado. El servidor receptor debe aceptarla, y la solicitud puede estar sujeta a las reglas de CORS para las partes del script de tu página.

Una nota de seguridad: los formularios pueden enviar datos a cualquier origen que pongas en action, y los navegadores enviarán las cookies de ese origen junto con la solicitud. Este es exactamente el mecanismo detrás de la falsificación de solicitudes entre sitios (CSRF) — una página maliciosa puede alojar un formulario que envíe datos a tu sitio. Por ello, establece action solo en orígenes de confianza y protege cualquier endpoint que modifique el estado con un token anti-CSRF validado en el servidor. Prefiere acciones relativas (del mismo origen) a menos que tengas una razón concreta para publicar en otro lugar.

Anular `action` con `formaction`

Un único formulario puede tener más de un botón de envío, y cada uno puede enviar los datos a un lugar diferente usando el atributo formaction. Cuando está presente en el botón o input que activó el envío, formaction anula el propio action del formulario. (Los atributos relacionados formmethod, formenctype y formtarget anulan method, enctype y target de la misma forma.)

<!DOCTYPE html>
<html>
  <head>
    <title>formaction example</title>
  </head>
  <body>
    <form action="/articles/publish" method="post">
      <label for="title">Title</label>
      <input type="text" name="title" id="title" value="My draft"/><br /><br />

      <!-- Uses the form's action: /articles/publish -->
      <button type="submit">Publish</button>

      <!-- Overrides the action just for this button -->
      <button type="submit" formaction="/articles/save-draft">Save draft</button>
    </form>
  </body>
</html>

Ambos botones envían los mismos campos, pero "Publish" publica en /articles/publish mientras que "Save draft" lo hace en /articles/save-draft. formaction es compatible con <button type="submit"> y <input type="submit"> (y <input type="image">), y no tiene efecto en controles que no sean de envío.

Práctica

¿Cuál es la función del atributo 'action' de HTML?

Especifica la URL a la que se envían los datos del formulario cuando este se envía.Cambia el color del texto dentro de un formulario.Añade estilos adicionales a los elementos HTML.Define el tipo de elemento de formulario (p. ej., input, select).Cuando se omite, impide que el formulario se envíe en absoluto.