L'élément HTML <select> représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.

Catégories de contenu Contenu de flux, contenu phrasé, contenu interactif, contenu de formulaire (listé, étiquetable, réinitialisable, qui peut être envoyé).
Contenu autorisé Zéro ou plusieurs éléments <option> ou <optgroup>.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisé menu
Interface DOM HTMLSelectElement

Attributs

Comme tous les autres éléments HTML, celui-ci inclut les attributs universels.

autofocus HTML5
Cet attribut booléen permet d'indiquer si ce contrôle du formulaire devrait recevoir le focus au chargement de la page. Pour un même document, seul un élément de formulaire peut avoir l'attribut autofocus activé.
disabled
Cet attribut booléen indique que l'utilisateur ne peut pas intéragir avec le contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état paramétré selon son conteneur (par exemple, via son élément parent <fieldset>. Si aucun élément parent n'a l'attribut disabled activé, le contrôle sera actif.
form HTML5
Cet attribut sert de référence au formulaire auquel est associé cet élément. Si cet attribut est utilisé, sa valeur doit être l'identifiant d'un élément <form> du même document. Cet attribut permet de placer des éléments n'importe où dans le document et pas nécessairement comme descendants d'un formulaire.
multiple
Cet attribut booléen indique qu'on peut sélectionner plusieurs options parmi celles offertes dans le contrôle. Par défaut, si cet attribut n'est pas utilisé, seule une option peut être sélectionnée.
name
Le nom associé au contrôle.
required HTML5
Un attribut booléen qui indique qu'une option dont la valeur est une chaîne de caractères non-vide doit être sélectionnée.
size
Si le contrôle est affichée comme une liste déroulante, cet attribut indique le nombre de lignes qui doivent être visibles à l'écran en même temps. On notera que les navigateurs ne sont pas obligés de présenter un élément <select> sous la forme d'une liste déroulante. La valeur par défaut de cet attribut est 0 (cf. notes de compatibilité ci-après).

Exemple basique

HTML

<!-- C'est la deuxième valeur -->
<!-- qui sera initialement sélectionnée -->
<select id="select">
  <option value="valeur1">Valeur 1</option> 
  <option value="valeur2" selected>Valeur 2</option>
  <option value="valeur3">Valeur 3</option>
</select>

Résultat

Exemple multi-selection

HTML

Attribut multiple, permet de selectionner plusieurs éléments d'une liste.

<select id="interet" multiple>
  <option value="musique">Musique</option> 
  <option value="cinema">Cinema</option>
  <option value="sport">Sport</option>
  <option value="jeuvideo">Jeu-Vidéo</option>
  <option value="lecture">Lecture</option>
</select>

Pour faire une sélection multiple : ctrl + clic ou cmd + clic

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<select>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<select>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<select>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple (Oui)2 (Oui)13 (Oui) (Oui) (Oui)2
autofocus (Oui) (Oui)1 (Oui) (Oui) (Oui)
disabled (Oui) (Oui)1 (Oui) (Oui) (Oui)
form (Oui) (Oui)1 (Oui) (Oui) (Oui)
multiple (Oui) (Oui)1 (Oui) (Oui) (Oui)
name (Oui) (Oui)1 (Oui) (Oui) (Oui)
required (Oui) (Oui)410 (Oui) (Oui)
size (Oui) (Oui)1 (Oui) (Oui) (Oui)
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple (Oui)1 2 (Oui)2 (Oui)14 (Oui) (Oui) (Oui)2
autofocus (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
disabled (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
form (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
multiple (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
name (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
required (Oui) (Oui) (Oui)4 Non (Oui) (Oui)
size (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)

1. In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.

2. border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.

3. Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.

4. Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, tolbon10, FanJiyong, jajm, tregagnon, Julien STUBY, teoli, Julien.stuby
 Dernière mise à jour par : SphinxKnight,