HTML <option> Tag
Exemple
Une liste déroulante avec quatre options :
<label for="cars">Choisissez une voiture :</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La balise <option> définit une option dans une liste de sélection.
Les éléments <option> se trouvent à l'intérieur d'un élément <select> , <optgroup> ou <datalist> .
Remarque : La balise <option> peut être utilisée sans aucun attribut, mais il est généralement nécessaire d'utiliser l'attribut value , qui indique ce qui est envoyé au serveur lors de la soumission du formulaire.
Astuce : Si vous avez une longue liste d'options, vous pouvez regrouper des options connexes dans la balise <optgroup> .
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <option> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Spécifie qu'une option doit être désactivée |
| label | texte | Spécifie un label plus court pour une option |
| selected | selected | Spécifie qu'une option doit être pré-sélectionnée lorsque la page se charge |
| value | texte | Spécifie la valeur à envoyer à un serveur |
Attributs Globaux
La balise <option> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <option> prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Utilisation de <option> dans un élément <datalist> :
<label for="browser">Choisissez votre navigateur dans la liste :</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist> Exemple
Utilisation de <option> dans des éléments <optgroup> :
<label for="cars">Choisissez une voiture :</label>
<select id="cars">
<optgroup label="Voitures Suédoises">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Voitures Allemandes">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select> Pages Associées
Référence DOM HTML : Objet Option
Paramètres CSS par Défaut
Aucun.