La balise HTML <select>
La balise HTML <select> crée une liste déroulante d'options. Découvrez ses attributs, l'étiquetage, multiple, size, required et les motifs de placeholder.
La balise HTML <select> crée une liste déroulante d'options. L'utilisateur clique sur le contrôle, la liste se déploie et il choisit une valeur (ou plusieurs, avec l'attribut multiple). C'est l'un des contrôles de formulaire essentiels, utilisé pour tout, des sélecteurs de pays aux menus de tri.
Cette page couvre la syntaxe, tous les attributs, l'accessibilité (étiquetage), les comportements de multiple / size / required, le motif de placeholder désactivé et la différence entre <select> et un champ associé à <datalist>.
La balise <option> définit chaque choix et se place à l'intérieur du <select>. Par défaut, la première option est présélectionnée ; ajoutez l'attribut selected à une option pour modifier celle qui est présélectionnée. Utilisez <optgroup> pour regrouper des options connexes sous un en-tête en gras non sélectionnable.
Pour soumettre la valeur choisie, donnez un name au <select> et placez-le dans un <form> (ou associez-le à un formulaire via l'attribut form). La valeur envoyée au serveur est la value de l'option sélectionnée.
Si vous devez envoyer les données au serveur ou lire la liste depuis un script, le <select> doit avoir un name et être associé à un <form>.
Toujours étiqueter votre <select>
Un <select> seul ne fournit aucun texte décrivant ce que l'utilisateur choisit, et les lecteurs d'écran n'annoncent rien de pertinent. Associez-le toujours à un <label> : définissez un id sur le <select> et pointez l'attribut for du label vers cet id. Cela permet également à l'utilisateur de cliquer sur le texte du label pour mettre le focus sur le contrôle.
Exemple d'un <select> étiqueté
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="topic">Choose a topic:</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>Lorsqu'un label visible n'est pas possible, utilisez aria-label="..." sur le <select> afin que la technologie d'assistance puisse quand même annoncer son rôle.
Syntaxe
La balise <select> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<select>) et fermante (</select>).
Exemple de la balise HTML <select> :
Exemple de la balise HTML <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Exemple de la balise HTML <select> avec la balise <optgroup> :
Exemple de la balise HTML <select> avec la balise <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>Dans cet exemple, la balise <optgroup> est utilisée pour regrouper les options en catégories.
Sélectionner plusieurs options
Ajoutez l'attribut boolean multiple pour permettre à l'utilisateur de choisir plusieurs options. Le contrôle s'affiche alors sous forme de liste à défilement plutôt que d'une liste déroulante. Combinez-le avec size pour définir le nombre de lignes visibles. Pour sélectionner plusieurs valeurs, l'utilisateur maintient Ctrl (Cmd sur Mac) en cliquant, ou maintient Shift pour sélectionner une plage.
Exemple de multiple et size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="langs">Languages you know:</label>
<select id="langs" name="langs" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</select>
</body>
</html>Lorsqu'un <select> multiple est soumis, chaque valeur sélectionnée est envoyée sous le même name (par exemple langs=html&langs=js).
Ajouter un placeholder
Un <select> a toujours une valeur, il n'existe donc pas de placeholder natif. La solution courante consiste à utiliser une première option vide, présélectionnée, désactivée et masquée — elle affiche une invite, ne peut pas être re-choisie et reste cachée une fois la liste ouverte. Combinez-la avec required pour qu'un vrai choix soit obligatoire avant la soumission du formulaire.
Exemple d'une option de placeholder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>Comme la value du placeholder est vide, l'attribut required le considère comme « rien de sélectionné » : soumettre le formulaire sans choisir une vraie option déclenche le message de validation du navigateur.
<select> vs. <datalist>
Un <select> oblige l'utilisateur à choisir parmi une liste fixe. Si vous souhaitez plutôt un champ de texte libre qui suggère des valeurs que l'utilisateur peut accepter ou ignorer, c'est le rôle d'un <datalist> associé à un <input> de type texte via l'attribut list — ce n'est pas une fonctionnalité de <select>. C'est un élément distinct au comportement différent ; utilisez-le quand la saisie avec autocomplétion convient mieux qu'une liste déroulante stricte.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Indique que la liste doit recevoir le focus après le chargement de la page. |
| disabled | disabled | Indique que la liste est désactivée, l'utilisateur ne peut pas interagir avec elle. |
| form | form_id | Associe le <select> à un <form> via l'id de ce formulaire, permettant au contrôle de se trouver en dehors de l'élément <form> dans le balisage tout en étant soumis avec lui. |
| multiple | multiple | Indique que plusieurs options peuvent être sélectionnées. La méthode de sélection de plusieurs options dépend du système d'exploitation. Sous Windows, il faut maintenir la touche CTRL enfoncée, sur Mac la touche CMD. |
| name | name | Définit un nom pour le menu déroulant. Il peut être utilisé pour accéder aux données du formulaire après son envoi ou pour créer un lien vers un élément JavaScript. |
| required | required | Indique qu'un choix d'option est obligatoire. |
| size | number | Indique le nombre d'options visibles dans la liste déroulante. Si la valeur de l'attribut « size » est supérieure à 1 et inférieure au nombre total d'options de la liste, le navigateur ajoute automatiquement un défilement pour indiquer qu'il y a d'autres options à afficher. |
La balise <select> prend en charge les attributs globaux et les attributs d'événements.
Comment styliser une balise HTML <select>
L'élément <select> est rendu en partie par le système d'exploitation, ce qui résiste à une mise en forme CSS complète et les résultats varient selon les navigateurs. Vous pouvez définir de manière fiable la police, les couleurs, le rembourrage et le modèle de boîte sur le contrôle lui-même. Pour remplacer la flèche déroulante native par la vôtre, réinitialisez l'apparence système avec appearance: none et ajoutez une flèche personnalisée (par exemple un background-image ou un conteneur avec un pseudo-élément). La liste d'options dépliée et la mise en forme par option restent peu contrôlables ; pour des listes déroulantes entièrement personnalisées au pixel près, les développeurs construisent généralement un widget à partir d'éléments non-<select> avec JavaScript.