<select>

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

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 id="select">
  <option value="valeur1">Valeur 1</option> 
  <option value="valeur2" selected>Valeur 2</option>
  <option value="valeur3">Valeur 3</option>
</select>

Résultat

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

Compatibilité des navigateurs

[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

• Les autres éléments relatifs aux formulaires : <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress> et <meter>
• Les évènements déclenchés par <select> : change