formulaires block

<select>

Représente un menu de sélection permettant de choisir une ou plusieurs options parmi une liste prédéfinie.

Description

L’élément <select> crée une liste déroulante ou une boîte de liste (avec multiple ou size). Il contient des éléments <option> et optionnellement des <optgroup> pour regrouper les options. L’option sélectionnée est envoyée lors de la soumission du formulaire.

Syntaxe

<label for="pays">Pays :</label>
<select id="pays" name="pays">
  <option value="">-- Choisir --</option>
  <option value="fr">France</option>
  <option value="be">Belgique</option>
</select>

Exemples

Sélection multiple :

<label for="langages">Langages maîtrisés :</label>
<select id="langages" name="langages" multiple size="5">
  <optgroup label="Web">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Back-end">
    <option value="php">PHP</option>
    <option value="python">Python</option>
  </optgroup>
</select>

Avec option par défaut :

<select name="priorite" required>
  <option value="" disabled selected>Choisir une priorité…</option>
  <option value="haute">Haute</option>
  <option value="moyenne">Moyenne</option>
  <option value="basse">Basse</option>
</select>

Attributs spécifiques

AttributTypeDescription
namestringNom envoyé lors de la soumission.
multiplebooleanAutorise la sélection de plusieurs options (avec Ctrl ou Shift).
sizeintegerNombre d’options visibles (affiche une boîte de liste au lieu d’un menu déroulant).
requiredbooleanOblige la sélection d’une option non vide.
disabledbooleanDésactive le contrôle.
autocompletestringHint d’autocomplétion.

Notes

Option vide comme placeholder : utiliser <option value="" disabled selected> comme première option pour afficher un texte indicatif sans valeur soumissible.

Style limité : <select> est l’un des éléments de formulaire les plus difficiles à styliser uniformément entre navigateurs. Des bibliothèques de composants personnalisés (basées sur <div> + ARIA) peuvent offrir plus de contrôle visuel, au coût d’une implémentation d’accessibilité plus complexe.

Support navigateurs

Chrome1+ · Firefox1+ · Safari1+ · Edge12+