HTML <select> Tag
Exemple
Créez une liste déroulante comportant quatre options :
<label for="cars">Choisissez une voiture :</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> Vous trouverez ci-dessous d'autres exemples "Essayez-le vous-même".
Définition et Utilisation
L'élément <select> est utilisé pour créer une liste déroulante.
L'élément <select> est le plus souvent utilisé dans un formulaire pour collecter les saisies de l'utilisateur.
L'attribut name est nécessaire pour référencer les données du formulaire après que celui-ci a été soumis (si vous omettez l'attribut name , aucune donnée de la liste déroulante ne sera soumise).
L'attribut id est nécessaire pour associer la liste déroulante à une étiquette.
Les balises <option> à l'intérieur de l'élément <select> définissent les options disponibles dans la liste déroulante.
Conseil : Ajoutez toujours la balise <label> pour garantir de meilleures pratiques d'accessibilité !
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <select> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Spécifie que la liste déroulante doit automatiquement obtenir le focus lorsque la page se charge |
| disabled | disabled | Spécifie qu'une liste déroulante doit être désactivée |
| form | form_id | Définit à quel formulaire appartient la liste déroulante |
| multiple | multiple | Spécifie que plusieurs options peuvent être sélectionnées à la fois |
| name | name | Définit un nom pour la liste déroulante |
| required | required | Spécifie que l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire |
| size | number | Définit le nombre d'options visibles dans une liste déroulante |
Attributs Globaux
La balise <select> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <select> prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Utilisez <select> avec des balises <optgroup> :
<label for="cars">Choisissez une voiture :</label>
<select name="cars" id="cars">
<optgroup label="Voitures Suédoises">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Voitures Allemandes">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select> Pages Associées
Référence DOM HTML : Objet Select
Tutoriel CSS : Styliser les Formulaires
Paramètres CSS par Défaut
Aucun.