Tag HTML <select>
Le tag HTML <select> est utilisé pour définir une liste déroulante qui apparaît lorsque l'utilisateur clique sur l'élément de formulaire et permet à l'utilisateur de sélectionner l'une des options.
Pour déterminer les choix disponibles, utilisez le tag <option> intégrée au tag <select>.
Par défaut, le premier élément de la liste est affiché comme élément sélectionné. Pour modifier la version prédéfinie, on utilise l'attribut selected.
Pour combiner plusieurs options dans un groupe, on utilise le tag <optgroup>. Le contenu du tag <optgroup> ressemble à un titre en gras.
L'apparence de la liste dépend de l'utilisation de l'attribut size, qui définit la hauteur de la liste. La largeur de la liste dépend de la longueur du texte dans le tag <option> . La largeur peut également être définie à l'aide de styles CSS.
Syntaxe
Le contenu de l’élément est écrit entre le tag ouvrant (<select>) et le tag fermant (</select>). Le tag fermant est requis.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<form>
<select>
<option value="books">Livres</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
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<select>
<optgroup label="Livres">
<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, nous avons utilisé le tag <optgroup> pour collecter les options dans un groupe.
Résultat
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<p>Aéroport de départ:</p>
<form action-xhr="action_form.php"
target=="_top"
method="POST">
<input type = "text" list = "airports" name="airports">
<datalist id = "airports">
<option value = "Berlin">
<option value = "Los Angeles">
<option value = "Moscou">
<option value = "Paris">
</datalist>
<input type = "submit" value = "confirmer">
</form>
</body>
</html>Dans cet exemple, nous avons utilisé le tag <form>, car nous devons envoyer des données au serveur.
Résultat
Airport of departure:
Attributs
| Attributs | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Indique que la liste doit recevoir le focus lors du chargement de la page. |
| disabled | disabled | Indique que la liste n'est pas active, c'est-à-dire que l'utilisateur ne pourra pas interagir avec elle. |
| form | form_id |
Définit la forme avec laquelle l'élément est lié.
Non supporté en Firefox. |
| multiple | multiple | Indique que vous pouvez sélectionner plusieurs options à la fois. La manière de choisir plusieurs options dépend du système d'exploitation: sous Windows, vous devez maintenir la touche CTRL enfoncée, dans le Mac - la clé CMD. |
| name | name | Spécifie le nom de la liste déroulante. Il peut être utilisé pour accéder aux données de formulaire après leur envoi ou pour faire référence à un élément en JavaScript. |
| required | required | Indique que la valeur est obligatoire |
| size | number | Indique le nombre d'options visibles dans la liste déroulante. Si la valeur de l'attribut de taille est supérieure à 1, mais inférieure au nombre total d'options de liste, le navigateur ajoute automatiquement une barre de défilement pour indiquer qu'il existe davantage d'options d'affichage. |
Le tag <select> supporte également les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <select> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <select>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <select>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <select>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <select>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
