<select>

Une liste déroulante dans laquelle l’utilisateur choisit une ou plusieurs options.

Affichage: inline-block
Balise fermante: Obligatoire
Contenu autorisé: Éléments <option> et <optgroup>

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Attributs
Attributs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<label for="lang">Langue du cours</label>
<select id="lang" name="lang">
  <option value="fr" selected>Français</option>
  <option value="en">Anglais</option>
  <option value="de">Allemand</option>
</select>

Aperçu

Définition et utilisation

L’élément <select> crée une liste de choix. Vous écrivez les options dans des éléments <option>, et vous pouvez regrouper des options liées dans un <optgroup>. Une fois le formulaire envoyé, le serveur reçoit la paire name=value de l’option choisie.

Une liste déroulante économise de la place quand il y a beaucoup d’options : pays, région, langue du cours. Avec deux ou trois options, des boutons radio sont souvent plus pratiques, car on voit toutes les possibilités d’un coup d’œil, sans avoir à cliquer.

Avec l’attribut multiple, la liste se transforme en une zone où l’on peut sélectionner plusieurs options (sur ordinateur, en maintenant Ctrl ou Cmd enfoncé). Cette solution est parfois peu intuitive, donc pour un choix multiple, envisagez plutôt un ensemble de cases checkbox.

Syntaxe

<select name="nom">
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

Attributs

name
texte
Le nom sous lequel la valeur de l’option choisie arrive au serveur. Une liste sans name ne sera pas envoyée.
multiple
attribut booléen
Permet de sélectionner plusieurs options. La liste s’affiche alors comme une zone déroulante avec défilement au lieu d’un menu déroulant, et le serveur reçoit une paire name=value distincte pour chaque option sélectionnée.
size
nombre
Le nombre de lignes visibles de la liste. Une valeur supérieure à 1 transforme le menu déroulant en une zone de liste fixe, même sans multiple.
required
attribut booléen
Exige qu’une option avec une valeur non vide soit choisie. Un modèle courant consiste à mettre une première option avec un value vide, par exemple « Choisissez une ville… », qui agit comme une indication et échoue à la validation.
disabled
attribut booléen
Désactive toute la liste. La valeur d’une liste désactivée n’est pas envoyée avec le formulaire.

Attribut	Valeurs	Description
name	texte	Le nom sous lequel la valeur de l’option choisie arrive au serveur. Une liste sans `name` ne sera pas envoyée.
multiple	attribut booléen	Permet de sélectionner plusieurs options. La liste s’affiche alors comme une zone déroulante avec défilement au lieu d’un menu déroulant, et le serveur reçoit une paire `name=value` distincte pour chaque option sélectionnée.
size	nombre	Le nombre de lignes visibles de la liste. Une valeur supérieure à 1 transforme le menu déroulant en une zone de liste fixe, même sans `multiple`.
required	attribut booléen	Exige qu’une option avec une valeur non vide soit choisie. Un modèle courant consiste à mettre une première option avec un `value` vide, par exemple « Choisissez une ville… », qui agit comme une indication et échoue à la validation.
disabled	attribut booléen	Désactive toute la liste. La valeur d’une liste désactivée n’est pas envoyée avec le formulaire.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

Attributs en pratique

multiple

attribut booléen

Permet de sélectionner plusieurs options. La liste s’affiche alors comme une zone déroulante avec défilement au lieu d’un menu déroulant, et le serveur reçoit une paire name=value distincte pour chaque option sélectionnée.

HTML

<label for="topics">Qu’est-ce qui vous intéresse ?</label><br>
<select id="topics" name="topics" multiple>
  <option value="frontend" selected>Frontend</option>
  <option value="backend">Backend</option>
  <option value="mobile" selected>Applications mobiles</option>
  <option value="ai">Intelligence artificielle</option>
</select>

Aperçu

size

nombre

Le nombre de lignes visibles de la liste. Une valeur supérieure à 1 transforme le menu déroulant en une zone de liste fixe, même sans multiple.

HTML

<select name="level" size="3" aria-label="Niveau">
  <option>Débutant</option>
  <option>Intermédiaire</option>
  <option>Avancé</option>
</select>

Aperçu

required

attribut booléen

Exige qu’une option avec une valeur non vide soit choisie. Un modèle courant consiste à mettre une première option avec un value vide, par exemple « Choisissez une ville… », qui agit comme une indication et échoue à la validation.

HTML

<form>
  <select name="city" required aria-label="Ville">
    <option value="">Choisissez une ville…</option>
    <option value="paris">Paris</option>
    <option value="lyon">Lyon</option>
    <option value="marseille">Marseille</option>
  </select>
  <button>Suivant</button>
</form>

Aperçu

disabled

attribut booléen

Désactive toute la liste. La valeur d’une liste désactivée n’est pas envoyée avec le formulaire.

HTML

<select name="plan" disabled aria-label="Plan">
  <option>Forfait annuel</option>
</select>

Aperçu

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Reliez toujours la liste à une étiquette <label>. Une première option « Choisissez… » ne remplace pas une étiquette.
L’apparence d’une liste déroulante ne peut être modifiée qu’en partie en CSS. Le nouveau mécanisme de style complet (appearance: base-select) ne fonctionne pour l’instant que dans certains navigateurs.
Pour des listes très longues, par exemple des centaines de villes, envisagez plutôt un champ de texte avec des suggestions <datalist>.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours