Balise HTML <option>
Exemple
Une liste déroulante avec quatre options :
<label for="cars">Choose a car:</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 <option>balise définit une option dans une liste de sélection.
<option>les éléments vont à l'intérieur d'un élément <select> ,
<optgroup> ou <datalist> .
Remarque : La <option>balise peut être utilisée sans aucun attribut, mais vous avez généralement besoin de l' attribut value , qui indique ce qui est envoyé au serveur lors de la soumission du formulaire.
Conseil : Si vous disposez d'une longue liste d'options, vous pouvez regrouper les options associées dans la balise <optgroup> .
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <option> | Yes | Yes | Yes | Yes | Yes |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that an option should be disabled |
| label | text | Specifies a shorter label for an option |
| selected | selected | Specifies that an option should be pre-selected when the page loads |
| value | text | Specifies the value to be sent to a server |
Attributs globaux
La <option>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <option>balise 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">Choose your browser from the list:</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 les éléments <optgroup> :
<label for="cars">Choose a car:</label>
<select id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Pages connexes
Référence HTML DOM : Objet Option
Paramètres CSS par défaut
Rien.