Web formulaires html5 – required

La spécification HTML5 introduit de nombreuses évolutions au niveau des formulaires, afin de mettre en place de nouveaux comportements natifs.
Intéressons-nous aujourd’hui à l’attribut ‘required’, permettant de définir pour quel élément une valeur est obligatoire avant la validation du formulaire.

Required



La syntaxe pour cet attribut est simple:

<input type="text" required name="a">

Cet attribut s’applique aux éléments input et textarea.

Chaque champ utilisant cet attribut doit avoir aussi un attribut « name », les champs sans nom n’étant pas soumis à la validation.
A la soumission, seul le premier champ obligatoire trouvé sans valeur sera focusé afin d’orienter l’utilisateur sur son omission.
Ceci est donc moins pratique qu’une solution Javascript capable de pointer tous les champs obligatoires non renseignés d’un seul coup.

Il existe une pseudo class selector CSS pour cibler les éléments obligatoires:

:required {
box-shadow: none; /* Firefox ajoute une ombre rouge par défaut */
}

Et cela fonctionne aussi sur les boutons radio : si l’attribut « required » est placé sur un ou plusieurs boutons radio, ce groupe de boutons sera obligatoire.
Concernant les cas à cocher ou checkboxes, l’attribut « required » travaille en individuel!

Compatibilité

firefoxFirefoxsafariSafarimobsafariSafari MobchromeChromeoperaOpéraieIEandroidAndroïd
Required6+5.1+5.1+6+10.6+10+3.2+

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *