<option>

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.

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

Compatibilité des navigateurs

[1] Gecko n'affiche pas la valeur de l'attribut label si le contenu textuel de l'élément option est vide (cf. bug 40545).

[2] Historiquement, Firefox laissait remonter les évènements liés à la souris sur <option> vers l'élément <select>. Ce n'est pas le cas pour Chrome et ce comportement est inégal au sein des différents navigateurs. Plutôt que d'écouter les évènements sur l'élément <option>, il est préférable d'écouter les événements change sur <select> (cf. bug 1090602).

[3] Lorsque Mozilla a ajouté les threads dédiés au contenu dans Firefox (via le projet Electrolysis/e10s), la prise en charge de la mise en forme des éléments <option> a temporairement été désactivée. À partir de Firefox 54, on peut de nouveau appliquer des couleurs d'arrière-plan et de premier plan grâce aux propriétés color et background-color sur les éléments <option>. Pour plus d'informations, voir bug 910022. Cette fonctionnalité est toujours désactivée sur GNU/Linux en raison du manque de contraste (cf. bug 1338283 pour plus d'informations à ce sujet).

Voir aussi

• Les autres éléments relatifs aux formulaires : <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress> et <meter>.