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

L'exemple ci-avant illustre une utilisation simple de <select> où l'attribut id peut être associé à un élément <label> qui permettra d'avoir un libellé accessible pour ce champ et où un attribut name représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément <option> qui se situe à l'intérieur de l'élément <select>.

Chaque élément <option> doit avoir un attribut value qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut selected sur un élément <option> afin que cette option soit sélectionnée par défaut au chargement de la page.

L'élément <select> possède certains attributs spécifiques dont multiple qui permet de choisir plusieurs options simultanément et size qui indique le nombre d'options affichées en même temps. Cet élément accepte également divers attributs qui sont utilisés pour les champs de formulaire tels que required, disabled, autofocus, etc.

Il est possible de regrouper plusieurs éléments <option> à l'intérieur d'éléments <optgroup> afin de créer des groupes d'options distincts.

Pour plus d'exemples, voir les contrôles natifs pour les formulaires.

Attributs

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

autocomplete
Une chaîne de caractères qui fournit une indication à l'agent utilisateur pour les fonctionnalités d'autocomplétion. Voir la page sur l'attribut autocomplete pour une liste des valeurs utilisables et de leurs impacts sur l'autocomplétion.
autofocus
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
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
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).

Mise en forme avec CSS

Il est communément admis que l'élément <select> est difficilement mis en forme avec CSS. Certains aspects de l'élément, son modèle de boîte, la police utilisée ou encore l'apparence (appearance), peuvent être modifiés.

Toutefois, ces propriétés peuvent fournir des résultats incohérents entre les différents navigateurs et il peut être difficile d'aligner différents contrôles sur une colonne.Aussi, si la structure interne de cet élément est trop complexe, on pourra créer un tel contrôle en utilisant des éléments non sémantiques, du code JavaScript et WAI-ARIA afin de décrire la sémantique du contrôle.

Pour plus d'informations sur la mise en forme de <select> :

Exemples

Exemple basique

HTML

<!-- C'est la deuxième valeur -->
<!-- qui sera initialement sélectionnée -->
<select id="monselect">
  <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

L'exemple qui suit est légèrement plus complexe et illustre certaines fonctionnalités qui peuvent être utilisées avec un élément <select> :

<label>Veuillez choisir un ou plusieurs animaux :
  <select name="pets" multiple size="4">
    <optgroup label="Animaux à 4-jambes">
      <option value="Chien">Chien</option>
      <option value="chat">Chat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Animaux volants">
      <option value="perroquet">Perroquet</option>
      <option value="macaw">Macaw</option>
      <option value="albatros">Albatros</option>
    </optgroup>
  </select>
</label>

Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut multiple lors de l'affichage de la page) mais vous pouvez voir l'exemple sur GitHub.

Vous pourrez voir que :

  • Plusieurs options peuvent être sélectionnées grâce à l'attribut multiple.
  • L'attribut size permet d'afficher uniquement 4 lignes simultanément et qu'il faut faire défiler le contenu.
  • Les éléments <optgroup> ont été utilisés pour diviser les choix en différents groupes. Cela applique un effet simplement visuel (avec le nom en gras et les options indentées).
  • Le choix "Hamster" est présent avec l'attribut disabled et ne peut donc pas être sélectionné.

Note : Sur un ordinateur de bureau, on pourra maintenir les touches Ctrl, Command, ou Shift en cliquant afin de sélectionner/déselectionner plusieurs options.

Résumé technique

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

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
selectChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Support complet OuiFirefox Support complet 1
Notes
Support complet 1
Notes
Notes 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.
IE Support complet OuiOpera Support complet OuiSafari Support complet Oui
Notes
Support complet Oui
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
WebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes 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>.
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Chrome Android Support complet Oui
Notes
Support complet Oui
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Opera Android Support complet OuiSafari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Samsung Internet Android Support complet Oui
autofocusChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
disabledChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
formChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
multipleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
nameChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
requiredChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
sizeChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : SphinxKnight,