<option> : l'élément d'option
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <option> est utilisé pour définir un élément contenu dans un élément <select>, <optgroup> ou <datalist>. Ainsi, <option> peut représenter des éléments de menu dans des fenêtres contextuelles et d'autres listes d'éléments dans un document HTML.
Exemple interactif
<label for="pet-select">Choisissez un animal :</label>
<select id="pet-select">
<option value="">--Veuillez choisir une option--</option>
<option value="dog">Chien</option>
<option value="cat">Chat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Perroquet</option>
<option value="spider">Araignée</option>
<option value="goldfish">Poisson rouge</option>
</select>
label {
font-family: sans-serif;
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: 0.9rem;
padding: 2px 5px;
}
Attributs
Cet élément inclut les attributs universels.
disabled-
Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément
<optgroup>désactivé. label-
La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément.
selected-
S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément
<option>est un élément descendant d'un élément<select>dont l'attributmultiplen'est pas activé, seul une<option>de cet élément<select>peut être sélectionnée de cette façon. value-
Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément
<option>.
Mise en forme avec CSS
La mise en forme des éléments <option> a historiquement été très limitée. Les éléments de sélection personnalisables expliquent les nouvelles fonctionnalités qui permettent leur personnalisation complète, comme n'importe quel élément du DOM.
Mise en forme héritée des options
Dans les navigateurs qui ne prennent pas en charge les fonctionnalités de personnalisation modernes (ou dans les bases de code anciennes où elles ne peuvent pas être utilisées), la mise en forme disponible sur les éléments <option> dépend du navigateur et du système d'exploitation. Selon le système, la propriété font-size du <select> parent est respectée dans Firefox et Chromium. Chromium peut également permettre de définir color, background-color, font-family, font-variant et text-align.
Vous trouverez plus de détails sur la mise en forme héritée des <option> dans notre guide sur la mise en forme avancée des formulaires.
Exemples
Voir <select> pour des exemples.
Résumé technique
| Catégories de contenu | Aucune. |
|---|---|
| Contenu autorisé |
Dans les éléments <select> traditionnels, seul le contenu textuel est autorisé, éventuellement avec des caractères échappés (comme é).
Dans les éléments de sélection personnalisables, les éléments <option> peuvent contenir n'importe quel contenu.
|
| Omission de balises |
La balise de début est obligatoire. La balise de fin est optionnelle si
l'élément est immédiatement suivi par un autre élément
<option> ou <optgroup> ou si
l'élément parent n'a plus d'autre contenu.
|
| Parents autorisés |
Un élément <select>,
<optgroup> ou
<datalist>.
|
| Rôle ARIA implicite | option |
| Rôles autorisés | Aucun role autorisé |
| Interface DOM | HTMLOptionElement |
Spécifications
| Specification |
|---|
| HTML # the-option-element |
Compatibilité des navigateurs
Voir aussi
- Les autres éléments relatifs aux formulaires :
<form>,<legend>,<label>,<button>,<select>,<datalist>,<optgroup>,<fieldset>,<textarea>,<input>,<output>,<progress>et<meter>. - Les éléments de sélection personnalisables