L'élément HTML <option>, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément <select>, <optgroup> ou <datalist>. Cet élément peut donc représenter des éléments d'un menu dans un document HTML.

Catégories de contenu Aucune.
Contenu autorisé Du texte qui contient éventuellement des caractères échappés (par exemple &eacute;).
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ôles autorisés Aucune
Interface DOM HTMLOptionElement

Attributs

Comme tous les autres éléments HTML, 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 bolé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'attribut multiple n'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>.

Exemples

HTML

<select name="select">
  Elle est où la poulette ?
  <option value="value1">Avec les lapins</option>
  <option value="value2" selected>Avec les canards</option>
  <option value="value3">Pas là</option>
</select>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<option>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<option>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<option>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 (Oui)1 (Oui) (Oui) (Oui)
disabled1 (Oui)1 (Oui) (Oui) (Oui)
label1 (Oui)11 2 3 (Oui) (Oui) (Oui)
selected1 (Oui)1 (Oui) (Oui) (Oui)
value1 (Oui)1 (Oui) (Oui) (Oui)
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
disabled (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
label (Oui) (Oui) (Oui)11 (Oui) (Oui) (Oui)
selected (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)
value (Oui) (Oui) (Oui)1 (Oui) (Oui) (Oui)

1. Firefox doesn't display the value of the label attribute as option text if element's content is empty. See bug 40545.

2. Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.

3. When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling <option> elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <option> elements again, using the color and background-color CSS properties. See bug 910022 for more information. Note that this is still disabled in Linux due to lack of contrast (see bug 1338283 for progress on this).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, stevenremot, tregagnon, teoli
 Dernière mise à jour par : SphinxKnight,