HTML select : listes déroulantes, sélection multiple et valeurs envoyées

HTML <select> est un contrôle de formulaire qui permet de choisir parmi les options définies par option. La sélection est unique par défaut ; multiple autorise plusieurs choix. L’attribut name de select identifie le champ envoyé, tandis que l’attribut value de l’option sélectionnée fournit sa valeur.

Distinguer les noms de champs, les étiquettes visibles et les valeurs soumises

Associez l’attribut for de l’élément label à l’attribut id de l’élément select pour relier une description au contrôle. id identifie l’élément dans le document, tandis que name devient la clé des données envoyées. Le texte visible peut différer de value : choisir Développement web peut envoyer web. Si vous omettez value, le texte de l’option sert de valeur.

Dans un contrôle à sélection unique ordinaire, omettre selected fait généralement que la première option disponible devient la sélection initiale. Pour exiger un choix explicite, donnez à la première option un value vide et ajoutez required, comme ci-dessous. Une instruction visible ne satisfait pas la sélection requise si sa valeur est vide.

Exemple complet : sélections requises et multiples

Enregistrez le code sous select-demo.html et ouvrez-le dans un navigateur. JavaScript empêche la soumission et affiche les données du formulaire actuel sur la page. Cet exercice n'envoie pas de données à un serveur réel ni à un site externe.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vérifier les valeurs de select</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Examiner les valeurs sélectionnées</h1>
  <form id="demo">
    <label for="topic">Sujet d’intérêt (obligatoire)</label>
    <select id="topic" name="topic" required>
      <option value="" selected>Choisissez un sujet</option>
      <optgroup label="Développement">
        <option value="web">Développement web</option>
        <option value="data">Traitement des données</option>
      </optgroup>
    </select>
    <label for="skills">Technologies à apprendre (sélection multiple autorisée)</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">Champ désactivé</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">Modification impossible</option>
    </select>
    <button type="submit">Afficher les valeurs</button>
    <button type="reset">Réinitialiser</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Appuyez sur Afficher les valeurs sans choisir de sujet. La validation des champs obligatoires du navigateur empêche la soumission.
2. Choisissez Développement web et appuyez sur Afficher les valeurs. Le résultat contient topic avec web, et deux entrées skills avec html et css. Le champ locked désactivé est exclu.
3. Modifiez la sélection des compétences et vérifiez à nouveau. Chaque option sélectionnée produit une autre entrée nommée skills. Si vous désélectionnez toutes les options, il se peut qu’il n’y ait aucune entrée skills.
4. Appuyez sur Réinitialiser. Le sujet revient à l'option d'instruction vide, les compétences reviennent à HTML et CSS, et la sortie est effacée.

multiple et size sont des attributs différents

multiple permet plusieurs valeurs, tandis que size spécifie le nombre de lignes visibles. L'augmentation de size n'active pas automatiquement la sélection multiple. Les combinaisons de touches dépendent du système d'exploitation. Les contrôles de bureau peuvent prendre en charge Ctrl ou Command avec un clic, ou Shift pour une sélection par plage ; les appareils mobiles peuvent fournir un écran de sélection séparé.

Lors de la lecture de sélections multiples en JavaScript, select.value ne donne que la première valeur sélectionnée. Parcourez selectedOptions ou appelez getAll('skills') sur une instance FormData, par exemple new FormData(form).getAll('skills'), pour récupérer toutes les valeurs. Sur le serveur, suivez les règles d'analyse de votre framework pour les champs répétés portant le même nom.

Utilisez disabled, required et selected avec précaution

disabled empêche l'interaction et exclut le champ des données soumises. Un select n'a pas d'équivalent natif de l'attribut readonly d'un élément input, donc l'ajout de readonly ne le verrouille pas. Désactiver un contrôle dans le navigateur ne remplace pas non plus les vérifications d'autorisation sur le serveur.

required, disabled, multiple et selected sont des attributs booléens. Même selected="false" laisse l'attribut présent, donc l'option peut toujours être considérée comme initialement sélectionnée. Supprimez l'attribut ou définissez sa propriété JavaScript correspondante sur false pour le rendre faux. Une réinitialisation restaure les sélections initiales déclarées dans le HTML ; elle n'efface pas nécessairement chaque sélection.

autofocus peut focaliser automatiquement le contrôle, mais ne l'utilisez que lorsque c'est nécessaire, en tenant compte de la position du lecteur et du comportement du clavier mobile. Les contrôles natifs et les fenêtres contextuelles varient selon le navigateur et le système d'exploitation, il est donc utile de conserver les associations label et l'interaction standard avec le clavier pour les formulaires ordinaires. La référence MDN pour select et la référence MDN pour option expliquent les règles détaillées.