Attribut HTML : required
L'attribut booléen required, s'il est présent, indique que l'utilisateur·ice doit définir une valeur avant que le formulaire propriétaire puisse être envoyé.
L'attribut required est pris en charge par les types text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, de l'élément HTML <input>, ainsi que les éléments HTML de contrôle de formulaire <select> et <textarea>. Si l'attribut est présent sur l'un de ces types ou éléments, la pseudo-classe CSS :required correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :optional correspondra.
L'attribut n'est pas pris en charge ou pertinent pour les types range et color, car les deux ont des valeurs par défaut. Le type color a pour valeur par défaut #000000. Le type range a pour valeur par défaut le point médian entre min et max — avec min et max par défaut à 0 et 100 respectivement dans la plupart des navigateurs si non déclarés. required n'est pas non plus pris en charge sur le type hidden — il n'est pas attendu que l'utilisateur·ice remplisse un champ de formulaire caché. Enfin, required n'est pas pris en charge sur les types de bouton, y compris image.
Dans le cas d'un groupe de boutons radio portant le même nom, si un seul bouton radio du groupe possède l'attribut required, un bouton radio du groupe doit être sélectionné, même si ce n'est pas forcément celui sur lequel l'attribut est appliqué. Pour faciliter la maintenance du code, il est recommandé d'inclure l'attribut required sur chaque bouton radio du groupe portant le même nom, ou sur aucun.
Dans le cas d'un groupe de cases à cocher checkbox portant le même nom, seules les cases à cocher avec l'attribut required sont requises.
Note :
Définir aria-required="true" indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucun impact sur le caractère optionnel de l'élément.
Interactions entre attributs
Comme un champ en lecture seule ne peut pas être modifié, required n'a aucun effet sur les entrées pour lesquelles l'attribut readonly est également défini.
Utilisabilité
Lorsque vous incluez l'attribut required, fournissez une indication visible près du contrôle informant l'utilisateur·ice que <input>, <select> ou <textarea> est requis. De plus, 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 l'utilisabilité pour les utilisateur·ice·s voyants. La technologie d'assistance doit informer l'utilisateur·ice que le contrôle de formulaire est obligatoire en fonction de l'attribut required, mais ajouter aria-required="true" ne nuit pas, 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 sa valeur est une chaîne de caractères (string en anglais) vide, alors l'élément présente valueMissing et l'élément correspondra à la pseudo-classe :invalid.
Problèmes d'accessibilité
Fournissez une indication à l'utilisateur·ice pour l'informer que le contrôle de formulaire est requis. Assurez-vous que le message soit multi-facette, par exemple par le texte, la couleur, des marques et l'attribut, afin que tous·tes les utilisateur·ice·s comprennent les exigences, qu'ils·elles soient daltonien·ne·s, présentent des différences cognitives ou utilisent un lecteur d'écran.
Exemple
HTML
<form>
<div class="group">
<input type="text" />
<label>Normal</label>
</div>
<div class="group">
<input type="text" required />
<label>Requis</label>
</div>
<input type="submit" />
</form>
Résultat
Spécifications
| Specification |
|---|
| HTML # attr-input-required |
| HTML # attr-select-required |
| HTML # attr-textarea-required |
Compatibilité des navigateurs
html.elements.input.required
Chargement…
html.elements.select.required
Chargement…
html.elements.textarea.required
Chargement…
Voir aussi
- La propriété Javascript
validityState.valueMissing - Les pseudo-classes CSS
:requiredet:optional - L'élément HTML
<input> - L'élément HTML
<select>