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

L'élément HTML <form> représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.

Exemple interactif

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 éléments du formulaire est valide ou non.

Catégories de contenu Contenu de flux, contenu tangible.
Contenu autorisé Contenu de flux qui ne contient pas d'élément <form>.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôle ARIA implicite form (en-US) si le formulaire a un nom accessible, sinon pas de rôle correspondant
Rôles ARIA autorisés search, none, presentation
Interface DOM HTMLFormElement

Attributs

Cet élément prend en charge les attributs universels.

accept

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

Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie le même encodage que celui de la page. (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).

autocapitalize

Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut autocapitalize est défini sur un des descendants du formulaire, il surchargera la valeur de autocapitalize utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est sentences. Les valeurs possibles sont:

  • none : La mise en majuscules est totalement désactivée
  • sentences : Les premières lettres des phrases sont automatiquement passées en majuscules.
  • words : La première lettre de chaque mot est automatiquement passée en majuscule.
  • characters : Tous les caractères sont automatiquement passés en majuscules.
autocomplete

Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :

  • off : Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir L'attribut autocomplete et les champs de connexion (en-US).)
  • on : Le navigateur peut compléter automatiquement les entrées.
name

Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.

rel

Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut rel pour plus de détails.

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

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, correspondant au type MIME éponyme et 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 :

  • 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 si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut formnovalidate des éléments <button> ou <input> appartenant au formulaire.

target

Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un contexte de navigation (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :

  • _self (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.
  • _blank: Chargement dans un nouveau contexte de navigation sans nom.
  • _parent: Charge dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, 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, se comporte de la même manière que _self.

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

Note : La définition de target="_blank" sur les éléments <form> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener.

Exemples

HTML

html

<!-- Formulaire simple qui enverra une requête GET -->
<form>
  <label
    >Nom :
    <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 :
    <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>

Résultat

Spécifications

Specification
HTML Standard
# the-form-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi