OUJOOD.COM
La balise HTML <option> — Définition et rôle
LES BALISES HTML
La balise <option> représente un choix dans une liste déroulante HTML. Elle s'utilise toujours à l'intérieur d'un <select>, et peut être rangée dans des groupes logiques grâce à <optgroup>. Ce qui la rend pratique : la valeur envoyée au serveur (attribut value) peut être différente du texte que voit l'utilisateur. On peut ainsi envoyer un code court comme fr tout en affichant France.
En HTML5, <option> reste pleinement supportée par tous les navigateurs modernes et les lecteurs d'écran. Peu d'éléments de formulaire ont traversé autant de versions HTML sans retouche — c'est parce qu'il n'y avait rien à corriger.
Syntaxe de base de la balise <option>
La balise <option> peut s'écrire avec ou sans balise de fermeture explicite. En pratique, la fermeture est recommandée pour la lisibilité. L'exemple ci-dessous combine <select>, <optgroup> et <option> pour créer une liste déroulante groupée par continent :
<select name="pays" id="choix-pays"> <!-- optgroup regroupe les options par continent --> <optgroup label="Europe"> <!-- value="fr" : envoyé au serveur | "France" : affiché à l'utilisateur --> <option value="fr">France</option> <option value="gb">Angleterre</option> <option value="de">Allemagne</option> </optgroup> <optgroup label="Afrique"> <option value="dz">Algérie</option> <option value="ma">Maroc</option> <option value="tn">Tunisie</option> </optgroup> </select>
Les attributs de la balise <option>
La colonne DTD indique dans quel profil HTML 4.01/XHTML 1.0 l'attribut est autorisé : S=Strict, T=Transitional, F=Frameset. En HTML5, tous ces attributs restent valides.
Attributs spécifiques de <option>
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| disabled | disabled | Grise l'option et empêche sa sélection. Pratique pour afficher un séparateur ou signaler un choix temporairement indisponible. | STF |
| label | texte | Affiche une étiquette courte à la place du contenu textuel de l'option. Utile quand le texte complet est trop long pour l'interface. | STF |
| selected | selected | Présélectionne l'option au chargement. Dans un <select multiple>, plusieurs options peuvent porter cet attribut en même temps. | STF |
| value | texte | Valeur envoyée au serveur à la soumission du formulaire. Sans cet attribut, c'est le texte de l'option qui est transmis. | STF |
Attributs globaux HTML5 applicables à <option>
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| class | nom de classe | Associe une ou plusieurs classes CSS à l'élément, pour le styliser ou le cibler en JavaScript. | STF |
| dir | ltr | rtl | Direction du texte : gauche à droite (ltr) ou droite à gauche (rtl). Nécessaire pour l'arabe ou l'hébreu. | STF |
| id | identifiant unique | Identifiant unique de l'élément, utilisable en CSS et JavaScript pour le cibler précisément. | STF |
| lang | code_langue | Langue du contenu de l'option (ex : fr, en, ar). Utile pour l'accessibilité et les moteurs de recherche. | STF |
| style | définition CSS | Style CSS inline appliqué directement sur l'élément. En pratique, une feuille de style externe est plus maintenable. | STF |
| title | texte | Info-bulle affichée au survol de l'élément. Améliore l'accessibilité et l'expérience utilisateur. | STF |
| xml:lang | code_langue | Équivalent XHTML de lang. Obligatoire en XHTML strict pour déclarer la langue du contenu. | STF |
Attributs d'événement JavaScript
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| onclick | script JS | Déclenche un script au clic de souris sur l'élément. | STF |
| ondblclick | script JS | Déclenche un script au double-clic sur l'élément. | STF |
| onmousedown | script JS | Déclenche un script quand le bouton de la souris est enfoncé. | STF |
| onmousemove | script JS | Déclenche un script quand le pointeur se déplace sur l'élément. | STF |
| onmouseout | script JS | Déclenche un script quand le pointeur quitte l'élément. | STF |
| onmouseover | script JS | Déclenche un script quand le pointeur survole l'élément. | STF |
| onmouseup | script JS | Déclenche un script au relâchement du bouton de la souris. | STF |
| onkeydown | script JS | Déclenche un script quand une touche du clavier est enfoncée. | STF |
| onkeypress | script JS | Déclenche un script à la pression d'une touche. Déprécié en HTML5 : utilisez onkeydown à la place. | STF |
| onkeyup | script JS | Déclenche un script au relâchement d'une touche du clavier. | STF |
Exemples pratiques
Exemple 1 — Option présélectionnée avec selected
Ajouter selected sur une option suffit à la définir comme valeur par défaut au chargement de la page. C'est utile pour pré-remplir le choix le plus fréquent ou celui qui correspond au contexte de l'utilisateur :
<select name="langue" id="choix-langue"> <!-- disabled + value="" : placeholder non sélectionnable --> <option value="" disabled>-- Choisissez une langue --</option> <!-- selected : affiché par défaut au chargement --> <option value="fr" selected>Français</option> <option value="en">Anglais</option> <option value="es">Espagnol</option> <option value="de">Allemand</option> </select>
Exemple 2 — Option désactivée avec disabled
disabled grise l'option dans la liste sans la supprimer. L'utilisateur la voit mais ne peut pas la choisir. C'est utile pour signaler un plan « bientôt disponible » ou créer un séparateur visuel dans une longue liste :
<select name="abonnement" id="choix-abonnement">
<option value="gratuit">Gratuit (limité)</option>
<option value="pro">Pro — 9,99€/mois</option>
<!-- disabled : visible dans la liste mais non sélectionnable -->
<option value="entreprise" disabled>Entreprise (bientôt disponible)</option>
</select>Exemple 3 — Sélection multiple avec multiple
L'attribut multiple sur <select> autorise plusieurs sélections simultanées. Sur Windows, on maintient Ctrl ; sur Mac, Cmd. On peut pré-sélectionner plusieurs options en ajoutant selected sur chacune :
<select name="competences[]" id="choix-competences" multiple size="5"> <!-- deux options présélectionnées par défaut --> <option value="html" selected>HTML5</option> <option value="css" selected>CSS3</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="sql">SQL</option> </select> <!-- En PHP, $_POST['competences'] retourne un tableau de valeurs -->
Exemple 4 — Listes déroulantes en cascade avec JavaScript
Un cas courant en formulaire : le contenu d'une liste change selon ce qui a été sélectionné dans une autre. On écoute l'événement onchange du premier <select>, puis on met à jour le second en JavaScript :
<select id="categorie" onchange="filtrerSousCategorie(this.value)">
<option value="">-- Catégorie --</option>
<option value="tech">Technologie</option>
<option value="sport">Sport</option>
</select>
<script>
function filtrerSousCategorie(valeur) {
// Récupère la valeur de l'option choisie (attribut value)
console.log('Valeur sélectionnée :', valeur);
// Récupère le texte visible de l'option active
const select = document.getElementById('categorie');
const texte = select.options[select.selectedIndex].text;
console.log('Texte affiché :', texte);
}
</script>← Retour à la liste des balises HTML
Retour à l'accueil du site
Par carabde | Publié le 10 mars 2014 | Mis à jour le 4 avril 2026