<select>
Proposer un choix dans une liste fermée
<select> + <option> + <optgroup> — La liste déroulante
La balise <select> crée une liste déroulante. Chaque choix est un <option>. Les choix peuvent être regroupes avec <optgroup> et son attribut label.
Quand l'utiliser
Tu veux proposer un choix parmi une longue liste d'options : pays, catégorie de produit, fuseau horaire. Pour 2 a 4 choix, des boutons radio dans un <fieldset> sont souvent plus accessibles.
Ce que tu gagnes
Accessibilité : les lecteurs d'écran annoncent le nombre d'options et les groupes. Le clavier permet de naviguer dans la liste, de taper les premières lettres pour sauter à une option et de sélectionner sans souris.
Exemple de code
<label for="country">Country:</label>
<select id="country" name="country">
<optgroup label="Europe">
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="es">Spain</option>
</optgroup>
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
</optgroup>
</select>Pour aller plus loin
- Le laissez-passer A38 — partie 2 — structurer les formulaires complexes
- WHATWG —
<select> - W3C — HTML spec
- MDN —
<select> - MDN —
<option> - MDN —
<optgroup>