Aller au contenu
Création de sites web en éco-conception

12/02/2015 Attribut required dans un select

Comment rendre une liste déroulante de type "select" obligatoire grâce à l'attribut "required" ?

Dans le code suivant, l'attribut required est parfaitement inutile :

<select required> <option>--- choisissez un chiffre</option> <option value="1">un</option> <option value="2">deux</option> </select>
Test :

En effet, même sans avoir choisi ni l'option "1" ni l'option "2", ce champ non rempli ne bloquera pas la soumission du formulaire. Pourquoi ? Car pour le navigateur, il n'est justement pas vide. Pourquoi ? Eh bien parce qu'une option a bien été choisie : la première, de valeur "--- choisissez un chiffre ---".

Pour qu'un attribut required soit effectif dans un champ de type "select", il faut que son "placeholder" (l'option qui sert de titre) ait une valeur nulle. Il suffit de procéder ainsi :

<select required> <option value="">--- choisissez un chiffre</option> <option value="1">un</option> <option value="2">deux</option> </select>
Test :

Commentaires

Merci pour l'info bien utile
05/01/2018
chloe5972
Parfait :), merci ;)
26/11/2018
Link

Ajouter un commentaire :