Élément HTML <form> : l'élément représentant un formulaire

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élément HTML <form> représente une section du document contenant des contrôles interactifs permettant de soumettre des informations.

Dans cet article

Exemple interactif

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Entrez votre nom&nbsp;: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Entrez votre e-mail&nbsp;: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="S'abonner !" />
  </div>
</form>

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

Il est possible d'utiliser les pseudo-classes CSS :valid et :invalid pour mettre en forme un élément <form> selon que le contenu des elements du formulaire est valide ou non.

Attributs

Cet élément inclut les attributs universels.

Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.

Note : Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut accept de l'élément <input type=file>.

accept-charset

L'encodage de caractères accepté par le serveur. La spécification autorise une seule valeur insensible à la casse "UTF-8", reflétant l'omniprésence de cet encodage (historiquement, plusieurs encodages de caractères pouvaient être définis sous forme de liste séparée par des virgules ou par des espaces).

autocapitalize

Contrôle la mise en majuscules automatique du texte saisi et, le cas échéant, la manière dont elle s'effectue. Voir la page de l'attribut universel autocapitalize pour plus d'informations.

autocomplete

Indique si, par défaut, les éléments d'entrée peuvent voir leurs valeurs complétées automatiquement par le navigateur. Les attributs autocomplete appliqués aux éléments du formulaire remplacent celui défini sur le <form>. Valeurs possibles :

off : Le navigateur peut ne pas compléter automatiquement les saisies. (Les navigateurs ont tendance à ignorer ce réglage pour les formulaires de connexion suspects ; voir Gérer l'autocomplétion pour les champs de connexion.)
on : Le navigateur peut compléter automatiquement les saisies.

name

Le nom du formulaire. La valeur ne doit pas être une chaîne vide et doit être unique parmi les éléments form de la collection de formulaires à laquelle il appartient, le cas échéant. Le nom devient une propriété des objets Window, Document et document.forms, contenant une référence à l'élément formulaire.

rel

Contrôle les annotations et les types de liens créés par le formulaire. Les annotations incluent external, nofollow, opener, noopener et noreferrer. Les types de liens incluent help, prev, next, search et license. La valeur de rel est une liste d'espaces de ces valeurs énumérées.

Attributs pour l'envoi de formulaires

Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.

action

L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut formaction sur un <button>, <input type="submit">, ou <input type="image">. Cet attribut est ignoré lorsque method="dialog" est défini.

enctype

Lorsque la valeur de l'attribut method est post, cet attribut définit le type MIME qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :

application/x-www-form-urlencoded : la valeur par défaut si l'attribut n'est pas défini
multipart/form-data : la valeur utilisée par un élément <input> avec l'attribut type="file".
text/plain : utilisé à des fins de débogage.

Cette valeur peut être remplacée par un attribut formenctype sur un <button>, <input type="submit">, ou <input type="image">.

method

Cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes (non sensibles à la casse) :

post : La méthode POST ; données du formulaire envoyées comme corps de la requête.
get : La méthode GET ; données du formulaire annexées à l'URL action avec un séparateur ?. Utilisez cette méthode lorsque le formulaire n'a pas d'effets secondaires.
dialog : Lorsque le formulaire se trouve à l'intérieur d'un <dialog>, ferme la boîte de dialogue à la soumission.

Si cet attribut n'est pas défini, la valeur par défaut utilisée est get. Cette valeur peut-être remplacée par un attribut formmethod sur un <button>, <input type="submit"> ou <input type="image">.

novalidate

Cet attribut booléen indique que le formulaire ne doit pas être validé lors de sa soumission. Si cet attribut n'est pas défini (et que le formulaire est donc validé), il peut être remplacé par un attribut formnovalidate sur un <button>, <input type="submit"> ou <input type="image"> appartenant au formulaire.

target

Indique où afficher la réponse après l'envoi du formulaire. C'est un nom/mot-clé pour un contexte de navigation (par exemple : onglet, fenêtre ou iframe). Les mots-clés suivants ont des significations particulières :

_self (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.
_blank : Charger dans un nouveau contexte de navigation sans nom. Cela a le même comportement que de définir rel="noopener" et ne définit pas window.opener.
_parent : Charger dans le contexte de navigation parent du contexte actuel. S'il n'y a pas de parent, il se comporte de la même manière que _self.
_top : Charger dans le contexte de navigation de niveau supérieur (c'est‑à‑dire le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il n'y a pas de parent, il se comporte de la même manière que _self.
_unfencedTop : Charge la réponse d'un formulaire situé à l'intérieur d'un cadre sécurisé dans la fenêtre de niveau supérieur (c'est‑à‑dire en traversant au‑delà de la racine de la fenced frame, contrairement aux autres destinations réservées). Disponible uniquement à l'intérieur des fenced frames.

Cette valeur peut être remplacée par un attribut formtarget sur un <button>, <input type="submit">, ou <input type="image">.

Exemples

HTML

html
<!-- Formulaire simple qui enverra une requête GET -->
<form>
  <label
    >Nom&nbsp;:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Sauvegarder</button>
</form>

<!-- Formulaire qui enverra une requête POST à l'URL actuelle -->
<form method="post">
  <label
    >Nom&nbsp;:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Sauvegarder</button>
</form>

<!-- Formulaire avec un ensemble de champs, une légende et une étiquette -->
<form method="post">
  <fieldset>
    <legend>Titre</legend>
    <label><input type="radio" name="radio" />Sélectionnez-moi</label>
  </fieldset>
</form>