Élément HTML <select> : l'élément de liste déroulante

Exemple interactif

L'exemple ci-avant illustre une utilisation typique de <select>. Il reçoit un attribut id pour pouvoir être associé à un élément <label> à des fins d'accessibilité, ainsi qu'un attribut name pour représenter le nom de la donnée envoyée au serveur. Chaque option du menu est définie par un élément <option> imbriqué dans l'élément <select>.

Chaque élément <option> doit avoir un attribut value pour définir la valeur à envoyer au serveur lorsque cette option est sélectionnée. Si aucun attribut value n'est défini, la valeur par défaut sera le texte contenu dans l'élément. Vous pouvez définir un attribut selected sur un élément <option> pour qu'il soit sélectionné par défaut au chargement de la page. Si aucun attribut selected n'est défini, le premier élément <option> sera sélectionné par défaut.

Un élément <select> est représenté en JavaScript par un objet HTMLSelectElement, et cet objet possède une propriété value qui contient la valeur de l'option sélectionnée.

L'élément <select> possède des attributs spécifiques que vous pouvez utiliser pour le contrôler, comme multiple pour définir si plusieurs options peuvent être sélectionnées, et size pour définir combien d'options doivent être affichées en même temps. Il accepte aussi la plupart des attributs généraux des champs de formulaire comme required, disabled, autofocus, etc.

Vous pouvez également imbriquer des éléments <option> à l'intérieur d'éléments <optgroup> pour créer des groupes distincts d'options dans la liste déroulante. Il est aussi possible d'inclure des éléments <hr> pour créer des séparateurs qui ajoutent des ruptures visuelles entre les options.

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

Attributs

Cet élément inclut les attributs universels.

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.

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

Cet attribut booléen indique que l'utilisateur·ice 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

L'élément <form> auquel associer le <select> (son propriétaire de formulaire). La valeur de cet attribut doit être l'id d'un <form> dans le même document. (Si cet attribut n'est pas défini, le <select> est associé à son élément <form> ancêtre, s'il existe.)

Cet attribut permet de définir l'association d'éléments <select> à des <form> n'importe où dans le document, pas seulement à l'intérieur d'un <form>. Il peut aussi définir une association différente de celle d'un ancêtre <form>.

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.

Le nom associé au contrôle.

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.

Si le contrôle est affiché comme une liste déroulante à défilement (par exemple, lorsque multiple est défini), cet attribut permet de définir le nombre de lignes de la liste qui doivent être visibles en même temps. Les navigateurs ne sont pas obligés d'afficher un élément select sous forme de liste à défilement. La valeur par défaut est 0.

Notes d'utilisation

Sélectionner plusieurs options

Sur un ordinateur de bureau, il existe différentes façons de sélectionner plusieurs options pour un élément <select> utilisant un attribut multiple.

Pour les personnes qui utilisent la souris, il est possible de maintenir les touches Ctrl, Command ou Maj (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.

Les utilisateur·ice·s du clavier pourront sélectionner des options contigües de la façon suivante :

• Placer le focus sur l'élément <select> (avec la touche Tab par exemple).
• Sélectionner une option en haut ou en bas de l'intervalle en se déplaçant avec les touches Haut et Bas.
• Maintenir la touche Shift puis utiliser les touches Haut et Bas pour augmenter ou réduire le nombre d'options sélectionnées.

Les utilisateur·ice·s du clavier pourront sélectionner des options non-contigües de la façon suivante :

• Placer le focus sur l'élément <select> (avec la touche Tab par exemple).
• Maintenir la touche Ctrl puis utiliser les touches Haut et Bas pour modifier le focus sur l'option qu'on souhaite choisir ou rejeter. L'option avec le focus sera entourée par un contour en pointillé.
• Appuyer sur Espace pour sélectionner/déselectionner les options avec le focus et ainsi de suite pour les différentes options.

Mise en forme avec CSS

L'élément <select> a historiquement été réputé difficile à mettre en forme efficacement avec CSS. Les guides suivants contiennent des informations sur les fonctionnalités plus récentes qui ont été introduites pour permettre des éléments de sélection entièrement personnalisables :

• Éléments de sélection personnalisables
• Listes de sélection personnalisables

Mise en forme héritée des select

Dans les navigateurs qui ne prennent pas en charge les fonctionnalités modernes de personnalisation (ou dans des bases de code anciennes où elles ne peuvent pas être utilisées), vous êtes limité·e à la manipulation du modèle de boîte, de la police affichée, etc. Vous pouvez aussi utiliser la propriété CSS appearance pour supprimer l'apparence système par défaut.

Il reste cependant difficile d'obtenir un résultat cohérent entre navigateurs avec les éléments <select> traditionnels. Si vous souhaitez un contrôle total, il est conseillé d'utiliser une bibliothèque offrant de bonnes possibilités de mise en forme des modules complémentaires de formulaire, ou de créer votre propre menu déroulant à l'aide d'éléments non sémantiques, de JavaScript et de WAI-ARIA pour fournir la sémantique.

Vous pouvez utiliser la pseudo-classe CSS :open pour mettre en forme les éléments <select> à l'état ouvert, c'est-à-dire lorsque la liste déroulante des options est affichée. Cela ne s'applique pas aux éléments <select> multi-lignes (ceux avec l'attribut multiple défini) — ils sont généralement rendus comme une liste à défilement plutôt qu'une liste déroulante, donc n'ont pas d'état ouvert.

Pour plus d'informations sur la mise en forme héritée des <select> :

• Mettre en forme les formulaires HTML
• Mise en forme avancée des formulaires HTML
• La propriété CSS field-sizing, qui contrôle la taille des éléments <select> par rapport à leurs options contenues.

Accessibilité

L'élément <hr> à l'intérieur d'un <select> doit être considéré comme purement décoratif, car il n'est actuellement pas exposé dans l'arbre d'accessibilité et donc pas accessible aux technologies d'assistance.

Exemples

Sélecteur simple

L'exemple suivant crée un menu déroulant à trois valeurs. La deuxième option inclut l'attribut selected, ce qui fait que cette option est sélectionnée par défaut.

Résultat

Sélecteur avec options groupées

L'exemple suivant crée un menu déroulant avec des groupes à l'aide de <optgroup> et <hr> pour faciliter la compréhension du contenu par l'utilisateur·ice.

Résultat

Sélecteur avancé avec multi-sélection

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> :

• L'attribut multiple permet de sélectionner plusieurs options.
• L'attribut size est défini sur 4, ce qui signifie que 4 lignes sont affichées à la fois. Les utilisateur·ice·s peuvent faire défiler pour voir toutes les options.
• Deux éléments <optgroup> sont inclus, créant deux regroupements visuels, généralement avec le nom du groupe en gras et les options imbriquées étant indentées.
• L'attribut disabled est inclus sur l'option « Hamster », ce qui rend cette option non sélectionnable.

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

• L'élément <option>
• L'élément <optgroup>
• Les éléments de sélection personnalisables
• Événements déclenchés par <select> : change, input