Balise HTML <select>
Exemple
Créez une liste déroulante avec quatre options :
<label for="cars">Choose a car:</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>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L' <select>élément est utilisé pour créer une liste déroulante.
L' <select>élément est le plus souvent utilisé dans un formulaire, pour collecter les entrées de l'utilisateur.
L' nameattribut est nécessaire pour référencer les données du formulaire une fois le formulaire soumis (si vous omettez l'
nameattribut, aucune donnée de la liste déroulante ne sera soumise).
L' idattribut est nécessaire pour associer la liste déroulante à une étiquette.
Les balises <option><select> à l'intérieur de l' élément définissent les options disponibles dans la liste déroulante.
Conseil : Ajoutez toujours la balise <label> pour les meilleures pratiques d'accessibilité !
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
Attributs globaux
La <select>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <select>balise prend également en charge les attributs d'événement en HTML .
Plus d'exemples
Exemple
Utilisez <select> avec les balises <optgroup> :
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Pages connexes
Référence HTML DOM : Sélectionner un objet
Tutoriel CSS : styliser les formulaires
Paramètres CSS par défaut
Rien.