Docs HTML exécutables : Liste déroulante

Q: Comment créer une liste déroulante en HTML ?

Utilisez avec un par choix : Red Blue . Donnez au select un name et un .

Q: Comment définir l'option par défaut d'un select ?

Ajoutez selected à cette option : Blue . Sans cela, la première option est sélectionnée. En JavaScript, définissez select.value = 'blue'.

Q: Comment récupérer la valeur sélectionnée d'un select en JavaScript ?

select.value est la valeur de l'option sélectionnée. Pour son texte visible, utilisez select.selectedOptions[0].text, et écoutez l'événement change pour réagir quand le choix change. Pour un select multiple, parcourez select.selectedOptions.

Q: Quelle est la différence entre un select et un datalist ?

Un n'autorise que les options listées. Un avec un propose des options pendant que le lecteur tape mais accepte n'importe quel texte. Utilisez select quand la réponse doit être l'une des vôtres.

Comment faire une liste déroulante en HTML

Une liste déroulante est un élément <select> avec un <option> pour chaque choix. La value de chaque option est ce qu'envoie le formulaire ; le texte entre les balises est ce que voit le lecteur. Choisissez une option et appuyez sur Submit :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Le formulaire envoie language=js : le name du select et la value de l'option choisie. selected fixe la valeur par défaut ; sans lui, la première option est choisie. Si une option n'a pas de value, c'est son texte qui est envoyé.

Reliez le label au select avec for et id (ou en l'entourant) pour qu'un clic sur le label mette le focus sur la liste et que les lecteurs d'écran l'annoncent.

Attributs de select et d'option

Élément	Attribut	Rôle
`<select>`	`name`	La clé sous laquelle la valeur est envoyée
`<select>`	`required`	Une vraie option doit être choisie, pas une première option vide servant de placeholder
`<select>`	`multiple`	Plusieurs options peuvent être choisies
`<select>`	`size`	Le nombre de lignes visibles (la transforme en zone de liste)
`<select>`	`disabled`	Toute la liste est désactivée et n'est pas envoyée
`<option>`	`value`	Ce qui est envoyé quand elle est choisie
`<option>`	`selected`	Choisie au chargement de la page
`<option>`	`disabled`	Affichée mais impossible à choisir
`<optgroup>`	`label`	Le titre du groupe

Une option placeholder avec required

Un select a toujours une valeur, donc sans placeholder, la première vraie option est envoyée même si le lecteur n'a jamais touché la liste. Une première option vide règle cela, et required bloque l'envoi tant qu'une vraie option n'est pas choisie :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Appuyez sur Continue avant de choisir : le navigateur refuse et vous demande de sélectionner un élément. Le placeholder a value="", ce que required considère comme vide, et disabled pour qu'il ne puisse plus être choisi une fois un pays sélectionné.

Regrouper les options avec optgroup

<optgroup label="..."> place un titre au-dessus d'un ensemble d'options. Le titre n'est pas sélectionnable :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Les groupes ne peuvent pas être imbriqués : une liste n'a qu'un seul niveau de titres, pas plus. disabled sur un <optgroup> désactive toutes ses options.

Sélection multiple

multiple permet au lecteur de choisir plusieurs options, et transforme la liste déroulante en zone de liste. Maintenez Ctrl (Cmd sur Mac) pour ajouter des options une par une, ou Maj pour sélectionner une plage :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Le formulaire envoie skills=html et skills=css : le même nom une fois par option choisie. Beaucoup de gens ne connaissent pas le geste Ctrl+clic, donc pour quelques options, un groupe de cases à cocher est plus simple à utiliser.

Lire et définir la valeur en JavaScript

select.value lit et définit la valeur de l'option choisie, et l'événement change se déclenche quand le lecteur choisit une autre option. Un usage courant est une seconde liste dont les options dépendent de la première :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) crée une option. select.selectedIndex est la position de l'option choisie, et select.selectedOptions liste les options choisies, ce qui permet de lire un select multiple.

Styliser un select

La liste ouverte est dessinée par le navigateur et le système d'exploitation, et on ne peut en styliser que peu de chose. La boîte fermée, si : appearance: none retire la flèche native, et une image de fond met la vôtre à sa place :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Le padding de fin supplémentaire laisse de la place à la flèche pour qu'un long texte d'option ne passe pas dessous. font: inherit compte autant ici que sur les boutons : les selects utilisent par défaut la petite police de formulaire du navigateur. Les options de la liste ouverte gardent l'apparence native. Chrome peut aussi styliser la liste ouverte si vous l'activez avec appearance: base-select ; les navigateurs qui ne le prennent pas en charge affichent la liste native. Un contrôle total partout demande un widget personnalisé construit avec ARIA, bien plus difficile à réussir qu'il n'y paraît.

Select, boutons radio ou datalist ?

Utilisez	Quand
`<select>`	Un choix dans une longue liste, ou quand la place manque
Des boutons radio	Un choix parmi quelques options qui doivent toutes être visibles (voir bouton radio HTML)
`<input>` avec `<datalist>`	Des suggestions, mais n'importe quelle valeur tapée est acceptée

Erreurs fréquentes

Pas de placeholder sur un choix obligatoire. La première vraie option est envoyée même si le lecteur ne l'a jamais choisie.
Un placeholder avec une vraie valeur, comme value="none". required le considère comme un choix valide. Utilisez value="".
Des options sans value quand le texte est long ou traduit. Le serveur reçoit le texte visible, qui change avec la langue.
multiple pour quelques options. Les cases à cocher sont plus simples à utiliser.
Écouter click sur les options. Utilisez change sur le <select> ; il se déclenche aussi pour les changements au clavier.
Pas de label. Un select qui n'a qu'un placeholder n'a plus de nom une fois une option choisie.

Questions fréquentes

Comment créer une liste déroulante en HTML ?

Utilisez <select> avec un <option> par choix : <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Donnez au select un name et un <label>.

Comment définir l'option par défaut d'un select ?

Ajoutez selected à cette option : <option value="blue" selected>Blue</option>. Sans cela, la première option est sélectionnée. En JavaScript, définissez select.value = 'blue'.

Comment ajouter un placeholder à un select ?

Faites de la première option une option vide et non sélectionnable : <option value="" disabled selected>Choose a country</option>. Ajoutez required au <select> pour que le formulaire ne puisse pas être envoyé tant qu'une vraie option n'est pas choisie.

Comment récupérer la valeur sélectionnée d'un select en JavaScript ?

select.value est la valeur de l'option sélectionnée. Pour son texte visible, utilisez select.selectedOptions[0].text, et écoutez l'événement change pour réagir quand le choix change. Pour un select multiple, parcourez select.selectedOptions.

Quelle est la différence entre un select et un datalist ?

Un <select> n'autorise que les options listées. Un <input> avec un <datalist> propose des options pendant que le lecteur tape mais accepte n'importe quel texte. Utilisez select quand la réponse doit être l'une des vôtres.

Concepts liés