Le :requiredsélecteur de pseudo classe en CSS permet aux auteurs de sélectionner et de styliser tout élément correspondant avec l' requiredattribut. Les formulaires peuvent facilement indiquer quels champs doivent avoir des données valides avant que le formulaire puisse être soumis, mais permettent à l'utilisateur d'éviter l'attente encourue en faisant du serveur le seul validateur de l'entrée de l'utilisateur.
Disons que nous avons une entrée avec un attribut de type="name"et en faisons une entrée obligatoire en utilisant l' requiredattribut booléen 1 :
Nous pouvons maintenant styliser cette entrée en utilisant le :requiredsélecteur de pseudo-classe:
/* style all elements with a required attribute */ :required ( background: red; )Nous pouvons également styliser les champs de formulaire requis à l'aide de sélecteurs simples et enchaîner des sélecteurs de pseudo-classes supplémentaires:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Démo
Voir le stylo: style requis par Chris Coyier (@chriscoyier) sur CodePen.
Points d'interêts
L' requiredattribut est traité comme un booléen, ce qui signifie qu'il ne nécessite pas de valeur. Le simple fait d'avoir requiredsur un élément permet au navigateur de savoir que cet attribut existe et l'entrée correspondante est en fait un champ obligatoire. Bien que, selon les spécifications du W3C, l'attribut requis fonctionne également avec une valeur vide ou une valeur avec le nom de l'attribut.
L'attribut requis demande également au navigateur d'utiliser des légendes natives telles que le message de bulle décrit dans la démo.
Pour les entrées non stylisées à l'aide :required, les auteurs peuvent également personnaliser les éléments non requis à l'aide du :optionalsélecteur de pseudo-classe avec :invalidet :validqui sont déclenchés lorsque les exigences de données d'un champ de formulaire sont satisfaites.
La validation de formulaire peut également être complétée requiredavec l' patternattribut pour aider à filtrer les données en fonction de l' typeattribut de l'entrée . Les modèles peuvent être écrits sous la forme d'une expression régulière ou d'une chaîne. Dans l'exemple ci-dessous, nous utilisons une expression régulière pour correspondre à la syntaxe d'une adresse e-mail.
L' :requiredattribut fonctionne sur les boutons radio. Si vous mettez requis sur un bouton radio (ou tous), ce groupe particulier de boutons radio sera requis. Sur les cases à cocher, rend chaque case individuelle obligatoire (à cocher).
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| dix | 4 | dix | 12 | 10.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10,3 |
1 Attributs booléens : un certain nombre d'attributs en HTML5 sont des attributs booléens. La présence d'un attribut booléen sur un élément représente la valeur vraie et l'absence de l'attribut représente la valeur fausse. Si l'attribut est présent, sa valeur doit être soit la chaîne vide, soit une valeur qui ne respecte pas la casse pour le nom canonique de l'attribut, sans espace de début ou de fin.