Balise HTML <option>
La balise <option> définit les éléments d'une liste déroulante. Description, attributs et exemples d'utilisation.
La balise <option> définit un élément individuel à l'intérieur d'une liste déroulante créée avec la balise <select>, ou une suggestion de saisie automatique à l'intérieur d'un élément <datalist>. Elle peut apparaître en tant qu'enfant de <select>, <datalist>, ou d'un <optgroup>, qui regroupe les options associées.
Chaque <option> possède deux données distinctes : le texte que l'utilisateur voit, et la valeur qui est soumise. Comprendre la différence entre ces deux éléments est la clé pour utiliser cette balise correctement, ce qui est expliqué en détail ci-dessous.
Syntaxe
La balise <option> peut être écrite en paire ou en balise auto-fermante. Lorsqu'elle est utilisée en paire, le texte affiché est écrit entre les balises ouvrante (<option>) et fermante (</option>).
La balise <option> est généralement utilisée avec l'attribut value pour spécifier quelle valeur doit être envoyée au serveur pour un traitement ultérieur.
Exemple de la balise HTML <option> :
Une liste déroulante avec la balise HTML <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet">Tablet</option>
</select>
</form>
</body>
</html>L'élément <select> est enveloppé dans un <form> ici car la liste déroulante est destinée à être soumise à un serveur. Un <select> fonctionne très bien sans formulaire pour les scripts purement côté client, mais vous avez besoin d'un formulaire (ou de JavaScript) pour envoyer réellement la valeur choisie quelque part.
L'attribut value et son piège
L'attribut value contient les données qui sont soumises lorsque l'option est sélectionnée. Le texte entre les balises n'est que ce que l'utilisateur voit — il n'a pas besoin de correspondre à la valeur.
Si vous omettez value, le navigateur soumet le contenu textuel de l'option à la place. Ces deux options se comportent de manière identique lors de la soumission :
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>C'est pratique, mais c'est aussi une source fréquente de bugs : si vous modifiez ultérieurement le texte visible (pour une traduction, une capitalisation ou une formulation) sur une option qui n'a pas de value, les données que votre serveur reçoit changent également. Pour des soumissions prévisibles et stables, définissez toujours un value explicite.
Exemple de la balise HTML <option> avec la balise <datalist>.
Liste des aéroports de départ avec la balise option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Departure airport:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option>Birmingham</option>
<option>Cambridge</option>
<option>Oxford</option>
<option>Bangor</option>
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>Dans cet exemple, les balises <option> sont placées à l'intérieur de la balise <datalist> sans l'attribut value, car le contenu textuel sert de suggestion de saisie automatique.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Indique que la sélection de l'élément est désactivée. |
| label | text | Définit un nom pour un élément de liste. |
| selected | selected | Définit que l'option doit être sélectionnée par défaut au chargement de la page. |
| value | text | Définit la valeur qui est envoyée au serveur. |
La balise <option> prend en charge les attributs globaux et les attributs d'événement.
Les attributs selected et disabled
selected marque l'option qui est présélectionnée au chargement de la page. disabled rend une option visible mais non sélectionnable (elle apparaît grisée). Dans cet exemple, Bleu est sélectionné par défaut et Vert ne peut pas être choisi :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>Une option de substitution
Un <select> affiche toujours sa première option par défaut, il n'y a donc pas de « substitut » intégré comme il en existe pour une saisie de texte. Le modèle courant consiste à ajouter une première option vide, disabled et selected. Elle invite l'utilisateur à faire un choix, ne peut pas être soumise comme valeur réelle, et ne peut pas être à nouveau sélectionnée une fois que l'utilisateur a choisi autre chose :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>L'attribut required appartient à l'élément <select>, et non à <option>. Comme l'option de substitution ci-dessus possède un value vide, le formulaire ne peut pas être soumis tant que l'utilisateur n'a pas sélectionné une vraie option.
Désactiver un groupe entier
L'attribut disabled fonctionne également sur un <optgroup>, ce qui désactive toutes les options qu'il contient en une seule fois — utile pour afficher des catégories temporairement indisponibles :
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>L'attribut label
L'attribut label fournit une légende alternative pour l'option. Lorsque label est défini, les navigateurs l'affichent à la place du contenu textuel. Si vous omettez label, le texte entre les balises est utilisé comme libellé — c'est pourquoi il est généralement omis et le texte visible est écrit directement.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>En pratique, vous avez rarement besoin de label sur un <option> simple ; il est surtout utile sur un <optgroup>, où label nomme l'en-tête du groupe.