Balise HTML <select>
La balise HTML <select> sert à créer une liste déroulante d'options, qui apparaît lorsque l'utilisateur clique sur un élément de formulaire, et elle permet à l'utilisateur de choisir une des options.
La <option> est utilisée pour définir les options possibles parmi lesquelles choisir. La balise est placée à l'intérieur de la balise <select>.
La première option de la liste est sélectionnée par défaut. Pour changer une option prédéfinie, l'attribut selected est utilisé.
La <optgroup> est utilisée pour regrouper plusieurs options en un seul groupe. L'étiquette de <optgroup> apparaît comme un titre en gras.
L'apparence de la liste dépend de l'attribut size, qui spécifie le nombre d'options visibles. La largeur de la liste dépend de la longueur du texte à l'intérieur de <option>. La largeur peut également être régulée avec des styles CSS.
La balise <select> est difficile à styliser efficacement avec CSS. Vous pouvez affecter certaines parties d'un élément. Par exemple, il est possible de contrôler la police affichée, le modèle de boîte, etc., ainsi que d'utiliser la propriété appearance pour supprimer l'apparence système par défaut. Mais ces propriétés ne donnent pas un résultat stable d'un navigateur à l'autre. La structure interne de la balise <select> est complexe et difficile à contrôler. Pour obtenir un contrôle total, vous pourriez avoir besoin d'une bibliothèque offrant un meilleur style pour les widgets de formulaire, ou d'un menu déroulant utilisant des éléments non sémantiques.
TIP
Si vous devez envoyer les données au serveur ou faire référence à la liste avec des scripts, la balise <select> doit être placée à l'intérieur de la <form>.
Syntaxe
La balise <select> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<select>) et de fermeture (</select>).
Exemple de la balise HTML <select> :
Exemple de balise HTML <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Résultat
Books HTML CSS PHP JavaScript ---
Exemple de la balise HTML <select> avec la balise <optgroup> :
Exemple de balise HTML <select> avec la balise <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>Dans cet exemple, la balise <optgroup> est utilisée pour regrouper les options.
Résultat
HTML CSS Git Java ---
Exemple de la balise HTML <input> avec la balise <datalist> :
Exemple de balise HTML <input> avec la balise <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<p>Airport of departure:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Berlin">
<option value="Los Angeles">
<option value="Moscow">
<option value="Paris">
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>Dans cet exemple, la balise <form> est utilisée car nous devons envoyer des informations au serveur.
Résultat
Aéroport de départ :
---
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Définit que la liste doit être focusée après le chargement de la page. |
| disabled | disabled | Indique que la liste est désactivée, l'utilisateur ne peut pas interagir avec elle. |
| form | form_id | Pris en charge dans tous les navigateurs modernes. |
| multiple | multiple | Indique que plusieurs options peuvent être choisies. La méthode de sélection de plusieurs options dépend du système d'exploitation. Sous Windows, vous devez maintenir la touche CTRL enfoncée, sous Mac la touche CMD. |
| name | name | Définit un nom pour le menu déroulant. Il peut être utilisé pour accéder aux données du formulaire après son envoi ou pour lier à un élément JavaScript. |
| required | required | Indique qu'un choix d'option est requis. |
| size | number | Indique le nombre d'options visibles dans la liste déroulante. Si la valeur de l'attribut "size" est supérieure à 1 et inférieure au nombre total d'options de la liste, le navigateur ajoutera automatiquement un défilement pour indiquer qu'il y a plus d'options à afficher. |
La balise <select> prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <select>
Pratique
Quelle est la fonction de l'élément HTML 'select' ?