L'attribut action en HTML

L'attribut HTML action spécifie l'URL vers laquelle les données du formulaire doivent être envoyées lors de la soumission du formulaire. Sa valeur est la destination qui traite les données soumises — généralement un script côté serveur ou un point de terminaison.

Vous pouvez utiliser cet attribut uniquement sur l'élément <form>. Lorsqu'un utilisateur active un contrôle de soumission, le navigateur collecte les champs nommés du formulaire, les encode et envoie une requête à l'adresse indiquée dans action. Cette page explique comment action se comporte, ce qui se passe lorsque vous l'omettez, comment il interagit avec les autres attributs du formulaire, et comment un seul bouton peut le remplacer avec formaction.

Syntaxe

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

L'URL peut être de deux types :

Absolue — une URL complète comprenant le schéma et l'hôte, par exemple https://api.example.com/submit. Utilisez-la lorsque le formulaire doit envoyer des données vers une origine différente (un domaine, sous-domaine ou schéma différent).
Relative — un chemin résolu par rapport à l'URL du document actuel, par exemple /form/submit ou save.php. C'est le choix habituel lorsque le formulaire renvoie les données vers votre propre site.

Exemple

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

Essayez vous-même »

Ici, nous utilisons un chemin relatif, de sorte que les données sont envoyées vers /form/submit sur le même domaine que la page courante. Pour envoyer des données vers un autre domaine, utilisez une URL absolue telle que https://example.com/some-page.

Ce qui se passe lorsque `action` est omis

Si vous omettez action (ou si vous le définissez comme une chaîne vide), le formulaire est soumis à l'URL de la page courante. C'est un modèle valide et courant : une page peut afficher le formulaire et gérer elle-même sa soumission.

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

Gardez à l'esprit que soumettre un formulaire à l'URL courante avec la méthode GET par défaut ajoute les champs du formulaire à l'URL sous forme de chaîne de requête, ce qui recharge la page avec ces valeurs visibles dans la barre d'adresse.

Comment `action` interagit avec les autres attributs du formulaire

L'attribut action ne fonctionne jamais seul — il définit où les données sont envoyées, tandis que les autres attributs de <form> définissent comment elles y parviennent :

method — choisit la méthode HTTP. Avec GET (valeur par défaut), les champs encodés sont ajoutés à l'URL de action sous forme de chaîne de requête, de sorte que l'URL devient action?name=value&.... Avec POST, les champs sont envoyés dans le corps de la requête, ce qui garde l'URL propre.
enctype — définit la façon dont le corps est encodé, et n'a d'importance qu'avec POST. La valeur par défaut application/x-www-form-urlencoded convient au texte ; vous avez besoin de multipart/form-data lorsque le formulaire inclut un téléchargement de fichier (<input type="file">).
target — détermine où la réponse est affichée, par exemple _self (même onglet, par défaut), _blank (nouvel onglet), ou le nom d'un <iframe>.

Vous pouvez en savoir plus sur ces attributs dans la référence de la balise <form> et dans le guide général sur les formulaires HTML.

URLs absolues vs. relatives : compromis

Choisir entre une URL absolue et une URL relative pour action va au-delà d'une simple préférence de style :

Les URLs relatives maintiennent le formulaire lié au site qui l'a servi. Elles résistent au déplacement du site vers un nouveau domaine ou au passage de http à https, et elles gardent la soumission same-origin, ce qui évite les complications d'origine croisée.
Les URLs absolues sont nécessaires lorsque vous devez envoyer des données vers une origine différente (par exemple un gestionnaire de formulaires tiers ou un hôte API séparé). Soyez délibéré ici : un POST vers une autre origine est une requête cross-origin. Le serveur destinataire doit l'accepter, et la requête peut être soumise aux règles CORS pour les parties scriptées de votre page.

Une note de sécurité : les formulaires peuvent envoyer des données vers n'importe quelle origine indiquée dans action, et les navigateurs enverront les cookies de cette origine avec la requête. C'est précisément le mécanisme à l'origine de la falsification de requête intersite (CSRF) — une page malveillante peut héberger un formulaire qui envoie des données vers votre site. Pour cette raison, définissez action uniquement vers des origines de confiance, et protégez tout point de terminaison modifiant un état avec un jeton anti-CSRF validé côté serveur. Préférez les actions relatives (same-origin) à moins d'avoir une raison concrète d'envoyer des données ailleurs.

Remplacer `action` avec `formaction`

Un même formulaire peut avoir plusieurs boutons de soumission, et chacun peut envoyer les données vers un endroit différent grâce à l'attribut formaction. Lorsqu'il est présent sur le bouton ou l'input qui a déclenché la soumission, formaction remplace l'attribut action du formulaire. (Les attributs associés formmethod, formenctype et formtarget remplacent de la même façon method, enctype et target.)

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

Les deux boutons soumettent les mêmes champs, mais « Publish » envoie les données vers /articles/publish tandis que « Save draft » les envoie vers /articles/save-draft. formaction est pris en charge sur <button type="submit"> et <input type="submit"> (ainsi que <input type="image">), et n'a aucun effet sur les contrôles non-submit.

Pratique

Quelle est la fonction de l'attribut HTML 'action' ?

Il spécifie l'URL vers laquelle les données du formulaire sont envoyées lors de la soumission du formulaire.Il modifie la couleur du texte à l'intérieur d'un formulaire.Il ajoute un style supplémentaire aux éléments HTML.Il définit le type d'élément de formulaire (par ex. input, select).Lorsqu'il est omis, il empêche la soumission du formulaire.