Boîte de sélection
Sélection
Si vous voulez plutôt que l'utilisateur du site Web puisse sélectionner un ou plusieurs éléments dans une boîte de sélection, c'est la balise <select> que vous voulez. Cette balise, avec l'aide de la balise <option>, vous permet de créer une boîte avec plusieurs choix que l'utilisateur pourra sélectionner. Elle possède aussi quelques attributs intéressant qui nous permettront de changer son comportement.
Dans cette page, nous verrons les façons les plus populaire d'utiliser cette balise.
Liste déroulante
Si vous voulez que votre utilisateur puisse choisir un seul choix parmi plusieurs, la liste déroulante est un bon choix. Cette méthode est comparable aux boutons radio, mais est généralement beaucoup plus compacte dans votre interface graphique.
Pour créer une liste déroulante, nous utiliserons la balise <select> avec un attribut size qui aura la valeur de 1.
Boîte
Si vous voulez que votre utilisateur puisse choisir un seul choix parmi plusieurs, mais que vous voulez afficher tous les choix rapidement à l'utilisateur sans qu'il ait besoin de cliquer à quelque part, la boîte de sélection unique est un bon choix. Cette méthode est comparable aux boutons radio et à la liste déroulante.
Pour créer une boîte de sélection unique, nous utiliserons la balise <select> avec un attribut size supérieur à 1. Si nous ne voulons pas de barre de défilement, nous voudrons mettre cette valeur exactement au nombre de <option> dans le <select>.
Boîte multiple
Si vous voulez que votre utilisateur puisse choisir plusieurs choix parmi une liste d'élément, la boîte de sélection multiple est un bon choix. Cette méthode est comparable aux checkbox.
Pour créer une boîte de sélection multiple, nous utiliserons la balise <select> avec un attribut size supérieur à 1. Si nous ne voulons pas de barre de défilement, nous voudrons mettre cette valeur exactement au nombre de <option> dans le <select>. De plus vous devrez ajouter l'attribut multiple sur le <select>.
Option par défaut
Si vous voulez offrir une valeur par défaut qui est différente de la valeur au haut d'une liste déroulante ou si vous voulez offrir des options déjà sélectionnées dans une boîte de sélection, l'attribut selected nous aidera. Vous pouvez placer cet attribut sur n'importe quel balise <option> pour en faire le choix par défaut.
Vous ne pouvez mettre qu'une seule valeur par défaut dans un <select>, à moins, bien entendu, que votre boîte de sélection soit multiple.
Groupes d'options
Il est possible de regrouper les options dans un <select> en petit groupe. Cela nous permet de mieux organiser les boîtes de sélection qui ont de nombreuses options. Pour ce faire, nous utiliserons la balise <optgroup> avec son attribut label.
Voici comment faire pour les utiliser: