Attribut HTML : required

L'attribut booléen required, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut required est pris en charge pour les éléments text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, les éléments file, <input>, <select> et <textarea> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe :required s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe :optional s'appliquera.

L'attribut n'est pas pris en charge ou n'est pas pertinent pour range et color, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris image.

Notez que color et range ne supportent pas required, mais le type color est par défaut #000000, et range prend par défaut le point médian entre min et max — avec min et max prenant par défaut les valeurs 0 et 100 respectivement dans la plupart des navigateurs s'ils ne sont pas déclarés — donc a toujours une valeur.

Dans le cas d'un groupe de boutons radio de même nom, si un seul bouton radio dans le groupe a l'attribut required, un bouton radio dans ce groupe doit être vérifié, bien que ce ne soit pas nécessairement celui où l'attribut est appliqué. Ainsi, pour améliorer la maintenance du code, il est recommandé d'inclure l'attribut required dans chaque bouton radio de même nom dans le groupe, ou bien dans aucun.

Dans le cas d'un même groupe nommé de types d'entrée checkbox, seules les cases à cocher avec l'attribut required sont obligatoires.

Note : Le réglage aria-required="true" indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.

Interactions entre attributs

Comme un champ en lecture seule ne peut pas avoir de valeur, required n'a aucun effet sur les entrées dont l'attribut readonly est également spécifié.

Utilisabilité

Lorsque vous incluez l'attribut required, fournissez une indication visible à proximité du contrôle informant l'utilisateur que les éléments <input>, <select> ou <textarea> sont obligatoires. En outre, ciblez les contrôles de formulaire requis avec la pseudo-classe :required, en les stylisant de manière à indiquer qu'ils sont requis. Cela améliore la convivialité pour les utilisateurs voyants. Les technologies d'assistance doivent informer l'utilisateur que le contrôle de formulaire est obligatoire sur la base de l'attribut required, mais l'ajout de aria-required="true" ne fait pas de mal, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en charge required.

Validation des contraintes

Si l'élément est requis et que la valeur de l'élément est la chaîne vide, alors l'élément souffre de valueMissing (en-US) et l'élément correspondra à la pseudo classe :invalid.

Exemple

HTML

html
<form>
  <div class="group">
    <input type="text" />
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required="required" />
    <label>Requis</label>
  </div>
  <input type="submit" />
</form>

Résultat

Accessibilité

Fournissez une indication aux utilisateurs pour les informer que le contrôle de formulaire est requis. Veillez à ce que le message soit multiforme (texte, couleur, marquage, attribut, etc.) afin que tous les utilisateurs comprennent les exigences, qu'ils soient daltoniens, qu'ils présentent des différences cognitives ou qu'ils utilisent un lecteur d'écran.

Spécifications

{{Specifications}}

Compatibilité des navigateurs

{{Compat}}

Voir aussi