<option>
Une option unique d’une liste `<select>`, ou une suggestion dans un `<datalist>`.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Texte
Exemple
#<label for="city">Ville de l’atelier</label>
<select id="city" name="city">
<option value="lyon">Lyon</option>
<option value="paris" selected>Paris</option>
<option value="bordeaux" disabled>Bordeaux (complet)</option>
</select>Définition et utilisation
#L’élément <option> représente un élément que l’on peut choisir. Il se trouve le plus souvent à l’intérieur de <select> ou <optgroup>, et dans <datalist>, il sert de suggestion pour un champ de texte.
Le texte entre les balises est ce que voit l’utilisateur, et l’attribut value est la valeur envoyée au serveur. Grâce à cela, vous pouvez afficher « Marseille » tout en envoyant le code court mrs. Si vous omettez value, c’est le texte de l’option qui sera envoyé.
Vous sélectionnez une option au départ avec l’attribut selected, ou vous la bloquez avec disabled. La balise fermante </option> peut formellement être omise, mais il est préférable de l’écrire.
Syntaxe
#<option value="valeur">Texte de l’option</option>Attributs
#texte
La valeur envoyée avec le formulaire quand cette option est choisie. Sans cet attribut, c’est le texte de l’option qui est envoyé.attribut booléen
Sélectionne l’option dès le chargement de la page. Si vous en marquez ainsi plusieurs dans une liste sansmultiple, le navigateur ne laissera sélectionnée que la dernière d’entre elles. Si vous n’en marquez aucune, c’est la première option disponible qui sera choisie.attribut booléen
Affiche l’option, mais ne permet pas de la choisir. Utile pour des créneaux complets ou des fonctionnalités réservées à un forfait supérieur.label
texte
Une étiquette pour l’option, utilisée à la place de son contenu. Rarement nécessaire en pratique, car le texte entre les balises suffit généralement.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#value
texteLa valeur envoyée avec le formulaire quand cette option est choisie. Sans cet attribut, c’est le texte de l’option qui est envoyé.
<select name="level" aria-label="Niveau">
<option value="1">Débutant</option>
<option value="2">Intermédiaire</option>
<option value="3">Avancé</option>
</select>selected
attribut booléenSélectionne l’option dès le chargement de la page. Si vous en marquez ainsi plusieurs dans une liste sans multiple, le navigateur ne laissera sélectionnée que la dernière d’entre elles. Si vous n’en marquez aucune, c’est la première option disponible qui sera choisie.
<select name="plan" aria-label="Plan">
<option value="monthly">Mensuel</option>
<option value="yearly" selected>Annuel</option>
</select>disabled
attribut booléenAffiche l’option, mais ne permet pas de la choisir. Utile pour des créneaux complets ou des fonctionnalités réservées à un forfait supérieur.
<select name="date" aria-label="Date">
<option>12 octobre</option>
<option disabled>19 octobre (complet)</option>
<option>26 octobre</option>
</select>Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez les valeurs
valuesous une forme stable et courte, par exemple des codes ou des identifiants. Vous pouvez alors modifier librement le texte de l’option sans casser le code côté serveur. - Une option d’indication « Choisissez… » devrait avoir
value="", et la liste elle-même l’attributrequired.
Entrées associées
#- <select>Une liste déroulante dans laquelle l’utilisateur choisit une ou plusieurs options.
- <optgroup>Un groupe nommé d’options à l’intérieur d’une liste `<select>`.
- <datalist>Une liste de suggestions pour un champ `<input>`. Vous pouvez choisir une proposition ou saisir votre propre valeur.
- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.