Une liste déroulante permet de proposer plusieurs choix dans un formulaire sans prendre trop de place à l'écran. Dans ce cours, vous allez apprendre à créer une liste déroulante, à y ajouter des options, à présélectionner une valeur et à gérer des cas un peu plus avancés comme le choix multiple ou le champ obligatoire.
Intérêt d'une liste déroulante
Dans un formulaire, il arrive souvent qu'on veuille laisser l'utilisateur choisir une réponse parmi plusieurs propositions déjà prévues : un pays, un mois, une taille de vêtement ou un créneau horaire.
Quand la liste devient un peu longue, afficher toutes les options en permanence n'est pas toujours pratique. Une liste déroulante permet alors de garder le formulaire plus compact.
Le principe est simple : au départ, on voit seulement le champ. Quand on clique dessus, la liste des choix apparaît.
<form>
<select>
<option>Paris</option>
<option>Lyon</option>
<option>Marseille</option>
</select>
</form>
Ici, plusieurs choix sont disponibles, mais ils ne prennent pas toute la place dans le formulaire.
Une liste déroulante est donc utile quand une seule réponse suffit et que vous voulez proposer un ensemble de valeurs déjà connues.
À revoir si besoin
Si vous voulez revoir le cas où l'on affiche plusieurs choix visibles en permanence, vous pouvez relire le cours Les listes à puce.
<select> pour créer une liste déroulante
La balise <select> sert de conteneur principal. C'est elle qui crée la liste déroulante dans le formulaire.
À elle seule, cette balise ne suffit pas encore à proposer des choix. Elle définit seulement la zone dans laquelle les options vont apparaître.
<select>
</select>
Retenez donc cette idée simple : la balise select crée la liste, mais pas encore son contenu.
<option> pour ajouter un choix
Pour remplir une liste déroulante, on place des balises <option> à l'intérieur de <select>.
Chaque balise <option> correspond à un choix possible.
<select>
<option>Matin</option>
<option>Après-midi</option>
<option>Soir</option>
</select>
Une option représente une réponse affichée dans la liste.
Dans un vrai formulaire, on ajoute souvent aussi un attribut value pour donner une valeur technique à chaque option.
<select>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
Pour bien débuter, vous pouvez surtout retenir qu'une balise <option> ajoute une ligne de choix dans la liste.
Présélectionner un choix avec selected
Si vous voulez qu'une option soit déjà choisie au chargement de la page, il suffit d'ajouter l'attribut selected dans cette option.
Cela permet d'afficher une valeur par défaut, par exemple le pays le plus fréquent ou le créneau le plus courant.
<select>
<option>Choisissez un créneau</option>
<option selected>Après-midi</option>
<option>Soir</option>
</select>
Ici, l'option Après-midi apparaît déjà comme choix actif.
Attention ! En pratique, il vaut mieux n'utiliser selected que sur une seule option dans une liste déroulante classique.
Ajouter un label <label>
Comme pour les autres champs de formulaire, une liste déroulante doit être accompagnée d'un <label> clair.
Le label explique ce que l'utilisateur doit choisir. Sans lui, on voit la liste, mais on ne sait pas toujours à quoi elle correspond.
<label for="pays">Pays</label>
<select id="pays">
<option>France</option>
<option>Belgique</option>
<option>Suisse</option>
</select>
Grâce au label, l'utilisateur comprend immédiatement ce qu'il doit sélectionner.
Le lien entre for="pays" et id="pays" reste important. Il associe correctement le texte du label à la bonne liste déroulante.
À revoir si besoin
Si vous voulez revoir le rôle exact d'un label dans un formulaire, vous pouvez relire le cours Structure d'un formulaire.
Autoriser le choix multiple
Par défaut, une liste déroulante permet de choisir une seule réponse. Si vous voulez laisser l'utilisateur en sélectionner plusieurs, vous pouvez ajouter l'attribut multiple sur la balise <select>.
La présentation change alors un peu : la liste n'est plus toujours affichée comme un simple menu qui se déroule. Le navigateur montre souvent plusieurs lignes visibles en même temps.
<label for="langages">Langages déjà pratiqués</label>
<select id="langages" multiple>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
</select>
Avec multiple, plusieurs options peuvent être sélectionnées dans le même champ.
Ce comportement se rapproche des cases à cocher : plusieurs réponses deviennent possibles. La différence est que tout reste regroupé dans un seul champ.
Rendre le champ obligatoire avec required
Si vous voulez empêcher l'envoi du formulaire tant qu'aucune réponse n'a été choisie, vous pouvez ajouter l'attribut required sur la balise <select>.
C'est particulièrement utile quand le choix demandé est important, par exemple une taille, un pays ou un mode de livraison.
<label for="livraison">Mode de livraison</label>
<select id="livraison" required>
<option value="">Choisissez un mode de livraison</option>
<option value="standard">Standard</option>
<option value="express">Express</option>
</select>
Ici, le formulaire attend qu'une vraie option soit choisie avant de continuer.
Vous remarquerez qu'on utilise souvent une première option vide avec un texte comme "Choisissez...". Cela permet d'afficher un message d'attente tout en laissant le navigateur vérifier qu'une vraie réponse a bien été sélectionnée.
Vous savez maintenant créer une liste déroulante avec <select>, y ajouter des choix avec <option>, présélectionner une réponse avec selected, relier le champ à un label, autoriser plusieurs choix avec multiple et rendre la sélection obligatoire avec required.