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).

Exemples

HTML

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

Résultat

Spécifications

Spécification État Commentaires
WHATWG 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é Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 (Oui) 1.0 (1.7 ou moins) [3] (Oui) (Oui) (Oui)
Attribut required (Oui) ? 4.0 (2.0) 10 (Oui) (Oui)
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui)[1] (Oui) 1.0 (1.0) [2] (Oui) (Oui) (Oui)
Attribut required (Oui) ? 4.0 (2.0) Pas de support (Oui) (Oui)

[1] Dans le navigateur par défaut d'Android 4.1 (et éventuellement dans les versions ultérieures), un bug empêche l'affichage du curseur triangulaire sur l'élément <select> si une règle CSS avec background, border ou border-radius est appliquée à l'élément.

[2] Par défaut, Firefox pour Android définit un dégradé avec background-image pour tous les éléments <select multiple>. Ce comportement peut être désactivé en surchargeant la règle par background-image: none.

[3] Par le passé, Firefox permettait aux évènements du clavier et de la souris de remonter de l'élément <option> jusqu'à l'élément parent <select>. Ce comportement n'a pas lieu avec Chrome et est différents parmi les différents navigateurs. Plutôt que d'écouter les évènements sur les éléments <option>, on privilégiera l'écoute des évènements change sur l'élément  <select>. Pour plus de détails, consulter le bug  bug 1090602.
Selon la spécification HTML5, la valeur par défaut pour l'attribut size devrait être 1. Cependant, en pratique, il s'avère que cela casse certains sites web et qu'aucun autre navigateur n'implémente cette règle. Pour ces raisons, Mozilla continue d'utiliser la valeur 0 par défaut avec Firefox.

Chrome et Safari ignorent tous les deux la propriété border-radius sur les éléments <select> sauf lorsque -webkit-appearance est surchargée avec une valeur appropriée.

Voir aussi

Étiquettes et contributeurs liés au document

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