Balise HTML <option>
La balise <option> définit les éléments d'une liste déroulante, définie par la balise <select>, ou les éléments de la liste de données pour la saisie semi-automatique, définie par la balise <datalist>. La balise <option> peut être utilisée comme élément enfant de la balise <select>, <datalist> ou <optgroup>, qui regroupe les éléments de la liste.
Enveloppez la balise <select> dans un élément <form> uniquement si vous devez soumettre les données sélectionnées à un serveur ou y accéder via des scripts.
Syntaxe
La balise <option> peut être écrite en paire ou comme une balise auto-fermante. Lorsqu'elle est utilisée en paire, le texte d'affichage est écrit entre les balises d'ouverture (<option>) et de fermeture (</option>).
TIP
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 une 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>Résultat
Ordinateur Ordinateur portable Tablette ---
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 semi-automatique.
Résultat
---
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 lors du 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.
Exemple avec les attributs selected et disabled :
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>Pratique
Quelles sont les caractéristiques et les utilisations de la balise HTML <option> ?