Liste déroulante

Dans les formulaires, les listes déroulantes doivent respecter certaines règles.

Règles générales

Les options proposées dans une liste déroulante doivent être ordonnées de manière logique :

  • Ordre alphabétique (une liste de langues, par exemple).
  • Ordre numérique (une liste de départements, par exemple).

Implémentation HTML

Code HTML

<select>
   <option value="Allemagne">Allemagne</option>
   <option value="Belgique">Belgique</option>
   <option value="Espagne">Espagne</option>
   <option value="France">France</option>
   <option value="Italie">Italie</option>
</select>

Visuel

Attribut selected

Si on souhaite privilégier une option, on aura alors recours à l’attribut selected.

Code HTML

<select>
   <option value="Allemagne">Allemagne</option>
   <option value="Belgique">Belgique</option>
   <option value="Espagne">Espagne</option>
   <option value="France" selected>France</option>
   <option value="Italie">Italie</option>
</select>

Visuel

Regroupement des options

Les options pevent être regroupées à l’aide de l’élément HTML optgroup.

Code HTML

<select>
<option value="">Choisissez une destination...</option>
<optgroup label="Asie">
   <option value="Chine">Chine</option>
   <option value="Corée du sud">Corée du sud</option>
   <option value="Japon">Japon</option>
   <option value="Vietnam">Vietnam</option>
</optgroup>
<optgroup label="Europe">
   <option value="Allemagne">Allemagne</option>
   <option value="Belgique">Belgique</option>
   <option value="Espagne">Espagne</option>
   <option value="France">France</option>
   <option value="Italie">Italie</option>
</optgroup>
</select>

Visuel