lment HTML <select> : l'lment de liste droulante

Exemple interactif

<label for="pet-select">Choisissez un animal&nbsp;:</label>

<select name="pets" id="pet-select">
  <option value="">--Veuillez choisir une option--</option>
  <option value="dog">Chien</option>
  <option value="cat">Chat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Perroquet</option>
  <option value="spider">Araigne</option>
  <option value="goldfish">Poisson rouge</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

L'exemple ci-avant illustre une utilisation typique de <select>. Il reoit un attribut id pour pouvoir tre associ un lment <label> des fins d'accessibilit, ainsi qu'un attribut name pour reprsenter le nom de la donne envoye au serveur. Chaque option du menu est dfinie par un lment <option> imbriqu dans l'lment <select>.

Chaque lment <option> doit avoir un attribut value pour dfinir la valeur envoyer au serveur lorsque cette option est slectionne. Si aucun attribut value n'est dfini, la valeur par dfaut est le texte contenu dans l'lment. Vous pouvez dfinir un attribut selected sur un lment <option> pour qu'il soit slectionn par dfaut au chargement de la page. Si aucun attribut selected n'est dfini, le premier lment <option> est slectionn par dfaut.

Un lment <select> est reprsent en JavaScript par un objet HTMLSelectElement, et cet objet possde une proprit value qui contient la valeur de l'option slectionne.

L'lment <select> possde des attributs spcifiques que vous pouvez utiliser pour le contrler, comme multiple pour dfinir si plusieurs options peuvent tre slectionnes, et size pour dfinir combien d'options doivent tre affiches en mme temps. Il accepte aussi la plupart des attributs gnraux des champs de formulaire comme required, disabled, autofocus, etc.

Vous pouvez galement imbriquer des lments <option> l'intrieur d'lments <optgroup> pour crer des groupes distincts d'options dans la liste droulante. Il est aussi possible d'inclure des lments <hr> pour crer des sparateurs qui ajoutent des ruptures visuelles entre les options.

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

Attributs

Cet lment inclut les attributs universels.

autocomplete

Une chane de caractres qui fournit une indication l'agent utilisateur pour les fonctionnalits d'autocompltion. Voir la page sur l'attribut autocomplete pour une liste des valeurs utilisables et de leurs impacts sur l'autocompltion.

autofocus

Cet attribut boolen permet d'indiquer si ce contrle du formulaire doit recevoir la slection au chargement de la page. Pour un mme document, seul un lment de formulaire peut avoir l'attribut autofocus activ.

disabled

Cet attribut boolen indique que l'utilisateurice ne peut pas interagir avec le contrle. Si cet attribut n'est pas utilis, le contrle hrite de l'tat paramtr selon son conteneur (par exemple, par son lment parent <fieldset>). Si aucun lment parent n'a l'attribut disabled activ, le contrle est actif. form

L'lment <form> auquel associer le <select> (son propritaire de formulaire). La valeur de cet attribut doit tre un id d'un <form> dans le mme document. (Si cet attribut n'est pas dfini, le <select> est associ son lment <form> anctre, s'il existe.)

Cet attribut permet de dfinir l'association d'lments <select> des <form> n'importe o dans le document, pas seulement l'intrieur d'un <form>. Il peut aussi dfinir une association diffrente de celle d'un anctre <form>.

multiple

Cet attribut boolen indique qu'on peut slectionner plusieurs options parmi celles offertes dans le contrle. Par dfaut, si cet attribut n'est pas utilis, seule une option peut tre slectionne.

name

Le nom associ au contrle.

required

Un attribut boolen qui indique qu'une option dont la valeur est une chane de caractres non-vide doit tre slectionne.

size

Si le contrle est affich comme une liste droulante dfilement (par exemple, lorsque multiple est dfini), cet attribut permet de dfinir le nombre de lignes de la liste qui doivent tre visibles en mme temps. Les navigateurs ne sont pas obligs d'afficher un lment select sous forme de liste dfilement. La valeur par dfaut est 0.

Note : Selon la spcification HTML, la valeur par dfaut de size doit tre 1 ; cependant, en pratique, cela a t constat comme cassant certains sites web, et aucun autre navigateur ne fait cela actuellement, donc Mozilla a choisi de continuer retourner 0 pour le moment avec Firefox.

Notes d'utilisation

Options dans des lments conteneurs

L'lment <select> construit sa liste d'options partir de tous les descendants <option>, pas seulement de ses enfants directs. Cela signifie que les options peuvent tre enveloppes dans d'autres lments, tels que des lments <div>, et qu'elles apparaissent toujours comme des options slectionnables dans le menu droulant et sont incluses dans l'envoi du formulaire. Les lments d'encapsulation sont utiles pour le style dans les lments de slection personnalisables mais n'ont aucun effet sur le comportement du slecteur : ils ne crent pas de groupes, d'tiquettes ou de sparateurs. Pour regrouper des options sous un en-tte, utilisez un <optgroup> ; une <option> compte comme faisant partie d'un <optgroup> si le groupe est un anctre, donc les lments d'encapsulation peuvent galement tre utiliss l'intrieur d'un groupe sans rompre l'association.

Slectionner plusieurs options

Sur un ordinateur de bureau, il existe diffrentes faons de slectionner plusieurs options pour un lment <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 systme d'exploitation utilis) et de cliquer sur les diffrentes options afin de les slectionner/dslectionner.

Les utilisateurices du clavier peuvent slectionner des options contiges de la faon suivante :

• Placer la slection sur l'lment <select> (avec la touche Tab par exemple).
• Slectionner une option en haut ou en bas de l'intervalle en se dplaant avec les touches Haut et Bas.
• Maintenir la touche Shift puis utiliser les touches Haut et Bas pour augmenter ou rduire le nombre d'options slectionnes.

Les utilisateurices du clavier peuvent slectionner des options non-contiges de la faon suivante :

• Placer la slection sur l'lment <select> (avec la touche Tab par exemple).
• Maintenir la touche Ctrl puis utiliser les touches Haut et Bas pour modifier la slection sur l'option qu'on souhaite choisir ou rejeter. L'option avec la slection est entoure par un contour en pointill.
• Appuyer sur Espace pour slectionner/dslectionner les options avec la slection et ainsi de suite pour les diffrentes options.

Mise en forme avec CSS

L'lment <select> a historiquement t rput difficile mettre en forme efficacement avec CSS. Les guides suivants contiennent des informations sur les fonctionnalits plus rcentes qui ont t introduites pour permettre des lments de slection entirement personnalisables :

• lments de slection personnalisables
• Listes de slection personnalisables

Mise en forme hrite des select

Dans les navigateurs qui ne prennent pas en charge les fonctionnalits modernes de personnalisation (ou dans des bases de code anciennes o elles ne peuvent pas tre utilises), vous tes limite la manipulation du modle de bote, de la police affiche, etc. Vous pouvez aussi utiliser la proprit CSS appearance pour supprimer l'apparence systme par dfaut.

Il reste cependant difficile d'obtenir un rsultat cohrent entre navigateurs avec les lments <select> traditionnels. Si vous souhaitez un contrle total, il est conseill d'utiliser une bibliothque offrant de bonnes possibilits de mise en forme des modules complmentaires de formulaire, ou de crer votre propre menu droulant l'aide d'lments non smantiques, de JavaScript et de WAI-ARIA pour fournir la smantique.

Vous pouvez utiliser la pseudo-classe CSS :open pour mettre en forme les lments <select> l'tat ouvert, c'est--dire lorsque la liste droulante des options est affiche. Cela ne s'applique pas aux lments <select> multi-lignes (ceux avec l'attribut multiple dfini) ils sont gnralement rendus comme une liste dfilement plutt qu'une liste droulante, donc n'ont pas d'tat ouvert.

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

• Mettre en forme les formulaires HTML
• Mise en forme avance des formulaires HTML
• La proprit CSS field-sizing, qui contrle la taille des lments <select> par rapport leurs options contenues.

Accessibilit

L'lment <hr> l'intrieur d'un <select> doit tre considr comme purement dcoratif, car il n'est actuellement pas expos dans l'arbre d'accessibilit et donc pas accessible aux technologies d'assistance.

Exemples

Slecteur simple

L'exemple suivant cre un menu droulant trois valeurs. La deuxime option inclut l'attribut selected, ce qui fait que cette option est slectionne par dfaut.

<select id="monselect">
  <option value="valeur1">Valeur 1</option>
  <option value="valeur2" selected>Valeur 2</option>
  <option value="valeur3">Valeur 3</option>
</select>

Rsultat

Slecteur avec options groupes

L'exemple suivant cre un menu droulant avec des groupes l'aide de <optgroup> et <hr> pour faciliter la comprhension du contenu par l'utilisateurice.

<label for="hr-select">Votre aliment prfr</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choisissez un aliment</option>
  <hr />
  <optgroup label="Fruits">
    <option value="apple">Pommes</option>
    <option value="banana">Bananes</option>
    <option value="cherry">Cerises</option>
    <option value="damson">Prunes</option>
  </optgroup>
  <hr />
  <optgroup label="Lgumes">
    <option value="artichoke">Artichauts</option>
    <option value="broccoli">Brocolis</option>
    <option value="cabbage">Choux</option>
  </optgroup>
  <hr />
  <optgroup label="Viandes">
    <option value="beef">Boeuf</option>
    <option value="chicken">Poulet</option>
    <option value="pork">Porc</option>
  </optgroup>
  <hr />
  <optgroup label="Poissons">
    <option value="cod">Cabillaud</option>
    <option value="haddock">Aiglefin</option>
    <option value="salmon">Saumon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Rsultat

Slecteur avanc avec multi-slection

L'exemple qui suit est lgrement plus complexe et illustre certaines fonctionnalits qui peuvent tre utilises avec un lment <select> :

• L'attribut multiple permet de slectionner plusieurs options.
• L'attribut size est dfini sur 4, ce qui signifie que 4 lignes sont affiches la fois. Les utilisateurices peuvent faire dfiler pour voir toutes les options.
• Deux lments <optgroup> sont inclus, crant deux regroupements visuels, gnralement avec le nom du groupe en gras et les options imbriques tant indentes.
• L'attribut disabled est inclus sur l'option  Hamster , ce qui rend cette option non slectionnable.

<label
  >Veuillez choisir un ou plusieurs animaux&nbsp;:
  <select name="pets" multiple size="4">
    <optgroup label="Animaux  4-pattes">
      <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>

Rsultat

Rsum technique

Spcifications

Compatibilit des navigateurs

Voir aussi

• L'lment <option>
• L'lment <optgroup>
• Les lments de slection personnalisables
• vnements dclenchs par <select> : change, input