L'attributbooléenrequired, 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'attributrequired est pris en charge par les typestext,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 typesrange etcolor, car les deux ont des valeurs par défaut. Le typecolor a pour valeur par défaut#000000. Le typerange a pour valeur par défaut le point médian entremin etmax — avecmin etmax 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 typehidden — 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 comprisimage.

Dans le cas d'un groupe de boutonsradio portant le même nom, si un seul bouton radio du groupe possède l'attributrequired, 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'attributrequired sur chaque bouton radio du groupe portant le même nom, ou sur aucun.

Dans le cas d'un groupe de cases à cochercheckbox portant le même nom, seules les cases à cocher avec l'attributrequired sont requises.

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'attributreadonly est également défini.

Utilisabilité

Lorsque vous incluez l'attributrequired, 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 ajouteraria-required="true" ne nuit pas, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en chargerequired.

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ésentevalueMissing 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.

Exemples

HTML

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

Résultat

Spécifications

Compatibilité des navigateurs

html.elements.input.required

html.elements.select.required

html.elements.textarea.required

Voir aussi

• La propriété APIValidityState.valueMissing
• Les pseudo-classes CSS:required et:optional
• L'élément<input>
• L'élément<select>