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é

firefoxFirefox safariSafari mobsafariSafari Mob chromeChrome operaOpéra ieIE androidAndroïd
Required 6+ 5.1+ 5.1+ 6+ 10.6+ 10+ 3.2+

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.