Critère 11.8
Liste de choix
Les items de même nature d'une liste de choix doivent être regroupés de manière pertinente.
En Bref : L'essentiel à retenir
- L'objectif est de faciliter la sélection dans les longues listes déroulantes.
- La solution technique consiste à regrouper les options en utilisant l'élément HTML `<optgroup>`.
- L'attribut `label` de `<optgroup>` permet de définir des catégories pour les options.
- L'exemple de code montre comment utiliser `<optgroup>` pour organiser les options de destination par continent.
Objectif
Faciliter la sélection dans les longues listes déroulantes (<select>) en regroupant les options par catégories.
Solution Technique
1. Utilisation de <optgroup>
Utilisez <optgroup> avec un attribut label pour créer des sous-groupes dans un <select>.
<label for="destination">Destination</label>
<select id="destination">
<optgroup label="Europe">
<option value="fr">France</option>
<option value="es">Espagne</option>
</optgroup>
<optgroup label="Asie">
<option value="jp">Japon</option>
<option value="cn">Chine</option>
</optgroup>
</select>