La balise HTML option

La balise option est un élément interne de la balise select et autres. Les options peuvent être regroupés dans des balises optgroup.

Les containers peuvent être <select>, <optgroup> et <datalist> depuis HTML 5.

La syntaxe est:

<option label="" value="">
</option>

La balise terminale peut être omise:

<option> ...
<option> ...

La forme courte n'est pas valide:

<option value="" />  // non valide

On peut donc à la fois assigner des données à l'attribut value ou les insérer entre la balise ouvrante et la balise fermante (s'il y a une balise fermante).

Les données insérées entre les balises sont affichées dans la liste, contrairement à la valeur de l'attribut value. Mais celui-ci peut être utilisé en JavaScript. Par exemple, pour une liste de liens, on placera le libellé en contenu et l'URL sera assigné à l'attribut.

<select>
  <option value="https://www.xul.fr">Le site XUL</option>
</select>

Les démonstrations dans l'article sur select montrent comment accéder aux options d'une liste et pas conséquent comment lire la valeur de l'attribut value (voir lien en bas de page).

Attributs d'option

Attribut	Valeur	Fonction	Version
selected	[selected]/rien	L'option sélectionnée est celle qui est affichée.
disabled	[disabled]/rien	Etat désactivé ou pas.
label	Chaîne	Nom pour transmettre les données de formulaire.	HTML 5
value	Chaîne	Valeur de cette option.

L'attribut name est supprimé en HTML 5 et remplacé par label. C'est l'attribut name de select qui est pris en compte pour envoyer les données de formulaire.

L'attribut value contient une valeur qui est passée avec les données de formulaire (pour l'option choisie). Comme elle n'est pas affichée cela permet d'afficher un contenu différent ce ce qui est envoyé avec les données de formulaire.

Exemple:

<select>
  <option>Un</option>
  <option selected>Deux</option>
</select>

Attributs de optgroup

Les options dans un optgroup partagent un même label.

Attribut	Valeur	Fonction	Version
disabled	[disabled]/rien	Etat désactivé ou pas.
label	Chaîne	Nom du groupe d'options.	HTML 5

Syntaxe

<optgroup>
    <option>
    <option>
    ...
<optgroup>
    <option>
    ...

Exemples d'options

Prévisualisation	Code
	<select size="2"> <option>un</option> <option>deux</option> </select>
	<select size="2"> <option>un <option>deux </select>
	<select> <option>un</option> <option>deux</option> </select>
	<select size="6" > <optgroup label="groupe1"> <option>Alpha</option> <option>Beta</option> </optgroup> <optgroup label="groupe2"> <option>Un</option> <option>Deux</option> </optgroup> </select>

Voir aussi La balise select.