Qu'est-ce que la balise <option> en HTML ?

Introduction à la balise <option>

La balise <option> est un élément fondamental du langage HTML qui permet de définir les choix disponibles au sein d'une liste déroulante ou d'un menu de sélection. Vous la rencontrerez systématiquement lorsque vous créerez des formulaires interactifs sur vos sites web, que ce soit pour permettre à vos utilisateurs de choisir leur pays, leur catégorie préférée ou toute autre option parmi une liste prédéfinie.

Maîtriser cette balise est essentiel pour tout développeur web souhaitant créer des interfaces utilisateur professionnelles et accessibles. Si vous débutez dans le développement web, notre formation sur HTML vous guidera pas à pas dans l'apprentissage de toutes les balises essentielles, y compris celles liées aux formulaires.

Définition et syntaxe de base

Qu'est-ce que la balise <option> ?

La balise <option> représente une option unique dans un contrôle de sélection. Elle fait partie des éléments de formulaire HTML et permet de proposer des choix à l'utilisateur. Chaque élément <option> correspond à une entrée que l'utilisateur peut sélectionner dans la liste déroulante créée par la balise parente.

Voici la syntaxe de base pour créer une liste de sélection avec plusieurs options :

<select name="formation">
  <option value="html">Formation HTML</option>
  <option value="css">Formation CSS</option>
  <option value="javascript">Formation JavaScript</option>
</select>

Dans cet exemple, nous créons un menu déroulant proposant trois formations. L'utilisateur verra les textes "Formation HTML", "Formation CSS" et "Formation JavaScript", tandis que les valeurs envoyées au serveur seront respectivement "html", "css" et "javascript".

Structure et contenu de la balise

La balise <option> possède une balise ouvrante <option> et une balise fermante </option>. Le texte placé entre ces deux balises constitue le libellé visible par l'utilisateur dans la liste déroulante. Ce texte peut contenir uniquement du texte brut, sans balises HTML imbriquées.

<!-- Syntaxe correcte -->
<option value="believemy">Believemy - Plateforme d'apprentissage</option>

<!-- Syntaxe incorrecte (pas de HTML dans le contenu) -->
<option value="believemy"><strong>Believemy</strong> - Plateforme</option>

Les attributs de la balise <option>

L'attribut value

L'attribut value est probablement le plus important de la balise <option>. Il définit la valeur qui sera envoyée au serveur lorsque le formulaire sera soumis. Cette valeur peut différer du texte affiché à l'utilisateur, ce qui vous permet d'utiliser des identifiants courts ou des codes tout en présentant des libellés compréhensibles.

<select name="niveau">
  <option value="1">Débutant</option>
  <option value="2">Intermédiaire</option>
  <option value="3">Avancé</option>
  <option value="4">Expert</option>
</select>

Si vous omettez l'attribut value, le navigateur utilisera automatiquement le contenu textuel de l'option comme valeur à soumettre.

L'attribut selected

L'attribut selected permet de pré-sélectionner une option par défaut lorsque la page se charge. C'est un attribut booléen, ce qui signifie que sa simple présence suffit à activer la fonctionnalité.

<select name="langue">
  <option value="fr" selected>Français</option>
  <option value="en">English</option>
  <option value="es">Español</option>
  <option value="de">Deutsch</option>
</select>

Dans cet exemple, l'option "Français" sera automatiquement sélectionnée lors du chargement de la page. Nous vous recommandons d'utiliser cet attribut pour définir une valeur par défaut logique, améliorant ainsi l'expérience utilisateur.

L'attribut disabled

L'attribut disabled permet de désactiver une option, la rendant non sélectionnable par l'utilisateur. L'option reste visible mais apparaît généralement grisée selon les styles par défaut du navigateur.

<select name="abonnement">
  <option value="" disabled selected>Choisissez votre abonnement</option>
  <option value="gratuit">Plan Gratuit</option>
  <option value="premium">Plan Premium</option>
  <option value="entreprise" disabled>Plan Entreprise (bientôt disponible)</option>
</select>

Cette technique est très utile pour créer un texte d'instruction en première position ("Choisissez...") ou pour indiquer des options temporairement indisponibles.

L'attribut label

L'attribut label permet de définir un texte alternatif pour l'option. Si cet attribut est présent, c'est sa valeur qui sera affichée dans la liste déroulante, plutôt que le contenu textuel de la balise.

<select name="pays">
  <option value="FR" label="France">République française</option>
  <option value="BE" label="Belgique">Royaume de Belgique</option>
  <option value="CH" label="Suisse">Confédération suisse</option>
</select>

Dans cet exemple, les utilisateurs verront "France", "Belgique" et "Suisse" dans le menu déroulant, bien que le contenu complet soit différent. Cet attribut est particulièrement utile pour afficher des versions abrégées tout en conservant les noms complets dans le code source.

Exemples pratiques et cas d'usage

Formulaire d'inscription avec plusieurs sélections

Voici un exemple complet d'utilisation de la balise <option> dans un formulaire d'inscription sur une plateforme d'apprentissage comme Believemy :

<form action="/inscription" method="POST">
  <div class="form-group">
    <label for="domaine">Domaine d'intérêt principal</label>
    <select id="domaine" name="domaine" required>
      <option value="" disabled selected>Sélectionnez un domaine</option>
      <option value="web">Développement Web</option>
      <option value="mobile">Développement Mobile</option>
      <option value="data">Data Science</option>
      <option value="design">Design UX/UI</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="experience">Niveau d'expérience</label>
    <select id="experience" name="experience">
      <option value="debutant" selected>Débutant (0-1 an)</option>
      <option value="intermediaire">Intermédiaire (1-3 ans)</option>
      <option value="confirme">Confirmé (3-5 ans)</option>
      <option value="expert">Expert (5+ ans)</option>
    </select>
  </div>
  
  <button type="submit">S'inscrire</button>
</form>

Ce formulaire illustre plusieurs bonnes pratiques : l'utilisation d'une option placeholder désactivée, la présélection d'une valeur par défaut logique, et l'association correcte des labels avec leurs champs respectifs grâce aux attributs for et id.

Regroupement d'options avec <optgroup>

Lorsque vous avez de nombreuses options, il est judicieux de les organiser en groupes logiques à l'aide de la balise <optgroup>. Cela améliore considérablement la lisibilité et l'expérience utilisateur.

<select name="formation_believemy">
  <option value="" disabled selected>Choisissez une formation</option>
  
  <optgroup label="Frontend">
    <option value="html">HTML - Les fondamentaux</option>
    <option value="css">CSS - Styliser vos pages</option>
    <option value="js">JavaScript - Dynamiser vos sites</option>
    <option value="react">React - Applications modernes</option>
  </optgroup>
  
  <optgroup label="Backend">
    <option value="php">PHP - Créer des sites dynamiques</option>
    <option value="node">Node.js - JavaScript côté serveur</option>
    <option value="python">Python - Polyvalence et puissance</option>
  </optgroup>
  
  <optgroup label="Base de données">
    <option value="mysql">MySQL - Bases relationnelles</option>
    <option value="mongodb">MongoDB - Bases NoSQL</option>
  </optgroup>
</select>

Les groupes d'options apparaissent avec un titre en gras (non sélectionnable) suivi des options qu'ils contiennent, créant une hiérarchie visuelle claire.

Sélection multiple

La balise select peut accepter l'attribut multiple, permettant à l'utilisateur de sélectionner plusieurs options simultanément. Dans ce cas, chaque <option> peut être cochée ou décochée indépendamment.

<label for="competences">Compétences à développer (plusieurs choix possibles)</label>
<select id="competences" name="competences[]" multiple size="6">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="react">React</option>
  <option value="vue">Vue.js</option>
  <option value="angular">Angular</option>
</select>
<p class="aide">Maintenez Ctrl (ou Cmd sur Mac) pour sélectionner plusieurs options</p>

L'attribut size définit le nombre d'options visibles simultanément sans défilement. Notez également que le nom du champ se termine par [] pour que le serveur reçoive un tableau de valeurs.

Utilisation avec la balise <datalist>

La balise <option> peut également être utilisée au sein d'un élément <datalist> pour créer une liste de suggestions auto-complétées. Contrairement à un select classique, l'utilisateur peut ici saisir une valeur personnalisée tout en bénéficiant de suggestions.

<label for="technologie">Quelle technologie souhaitez-vous apprendre ?</label>
<input type="text" id="technologie" name="technologie" list="technologies-list" 
       placeholder="Tapez ou sélectionnez...">

<datalist id="technologies-list">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Python">
  <option value="PHP">
  <option value="React">
  <option value="Vue.js">
  <option value="Node.js">
</datalist>

Bonnes pratiques pour l'accessibilité

Association avec les labels

Pour garantir une bonne accessibilité de vos formulaires, vous devez toujours associer vos listes de sélection à un élément label explicite. Cette association permet aux technologies d'assistance, comme les lecteurs d'écran, d'annoncer correctement le but du champ de sélection.

<!-- Méthode recommandée : attributs for/id -->
<label for="pays-residence">Pays de résidence</label>
<select id="pays-residence" name="pays">
  <option value="fr">France</option>
  <option value="be">Belgique</option>
  <option value="ca">Canada</option>
</select>

<!-- Méthode alternative : imbrication -->
<label>
  Pays de résidence
  <select name="pays">
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ca">Canada</option>
  </select>
</label>

Textes descriptifs et clairs

Nous vous recommandons de rédiger des libellés d'options clairs et descriptifs. Évitez les abréviations obscures et assurez-vous que chaque option soit compréhensible hors contexte.

<!-- À éviter -->
<select name="type">
  <option value="1">Type 1</option>
  <option value="2">Type 2</option>
</select>

<!-- Recommandé -->
<select name="type_compte">
  <option value="particulier">Compte particulier</option>
  <option value="professionnel">Compte professionnel</option>
</select>

Stylisation CSS de la balise <option>

Les possibilités de stylisation des balises <option> sont malheureusement limitées en CSS pur. Les navigateurs appliquent leurs propres styles par défaut, et la plupart des propriétés CSS sont ignorées. Voici néanmoins ce que vous pouvez modifier :

/* Styles basiques possibles */
option {
  background-color: #f5f5f5;
  color: #333;
  padding: 8px; /* souvent ignoré */
}

/* Styliser l'option sélectionnée */
option:checked {
  background-color: #3498db;
  color: white;
}

/* Options désactivées */
option:disabled {
  color: #999;
  font-style: italic;
}

/* Style du select parent (plus de possibilités) */
select {
  padding: 10px 15px;
  border: 2px solid #3498db;
  border-radius: 5px;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
}

Erreurs courantes à éviter

Oublier l'attribut value

Bien que le navigateur utilise le contenu textuel comme valeur par défaut, nous vous conseillons de toujours spécifier explicitement l'attribut value. Cela évite les problèmes lors du traitement côté serveur, notamment si le texte visible contient des espaces ou des caractères spéciaux.

<!-- Problématique -->
<option>Option avec espaces et accents éèà</option>

<!-- Recommandé -->
<option value="option_accents">Option avec espaces et accents éèà</option>

Utiliser <option> en dehors de son contexte

La balise <option> n'a de sens que lorsqu'elle est enfant direct d'un élément select, <optgroup> ou <datalist>. Utilisée ailleurs, elle sera ignorée par le navigateur.

<!-- INCORRECT : option orpheline -->
<div>
  <option value="test">Ceci ne fonctionnera pas</option>
</div>

<!-- CORRECT -->
<select>
  <option value="test">Ceci fonctionne</option>
</select>

Confondre le texte affiché et la valeur

Il est important de comprendre la différence entre le contenu textuel (ce que voit l'utilisateur) et l'attribut value (ce qui est envoyé au serveur). Cette distinction permet de présenter des libellés conviviaux tout en utilisant des valeurs techniques.

Tableau récapitulatif des attributs

Compatibilité navigateurs

La balise <option> bénéficie d'une excellente compatibilité avec tous les navigateurs, étant présente depuis les premières versions de HTML.

Questions fréquentes sur la balise <option>

Non, la balise <option> n'accepte que du texte brut comme contenu. Pour intégrer des images ou des icônes dans un menu de sélection, vous devrez utiliser des solutions JavaScript personnalisées ou des bibliothèques comme Select2 qui permettent de créer des menus déroulants enrichis avec du contenu HTML personnalisé.

Vous pouvez récupérer la valeur de l'option sélectionnée en accédant à la propriété value de l'élément select. Voici un exemple :

const selectElement = document.querySelector('select[name="formation"]');
const valeurSelectionnee = selectElement.value;

// Pour récupérer le texte de l'option sélectionnée
const texteOption = selectElement.options[selectElement.selectedIndex].text;

La technique recommandée consiste à créer une première option avec une valeur vide, les attributs disabled et selected, contenant un texte d'instruction :

<select name="choix" required>
  <option value="" disabled selected>Veuillez sélectionner une option</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

Pour maîtriser HTML et toutes ses balises, y compris les éléments de formulaire comme <option>, nous vous recommandons de suivre notre cours complet pour apprendre HTML. Vous y découvrirez toutes les bonnes pratiques pour créer des sites web accessibles et professionnels, avec des exercices pratiques et des projets concrets pour consolider vos apprentissages.