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.

© 2010-2012 Xul.fr