0Pricing
HTML Academy · Leçon

Menus déroulants Select et option

Créez des menus de sélection déroulants avec `select` et `option`.

Menus déroulants Select et option est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L’élément select

L’élément <select> crée un menu déroulant :

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

value et texte d’option

Chaque élément <option> possède une value (envoyée au serveur) et un texte affiché :

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

Attribut selected

Présélectionnez une option avec l’attribut selected :

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

optgroup pour les options catégorisées

Regroupez les options associées avec <optgroup> :

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Attribut multiple

Autorisez la sélection de plusieurs options avec l’attribut multiple :

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

Attribut size

L’attribut size contrôle le nombre d’options visibles :

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Options et groupes disabled

Désactivez des options individuelles ou des groupes entiers :

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

Mise en forme de select

La mise en forme de <select> natif est limitée — voici ce qui fonctionne :

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Menus déroulants personnalisés et select natif

Voici les compromis à prendre en compte pour un composant de menu déroulant personnalisé :

  • Select natif — accessible par défaut, adapté aux appareils mobiles et fonctionnel sans JavaScript
  • Menu déroulant personnalisé — contrôle complet de la mise en forme, mais nécessite une implémentation complète d’ARIA et la gestion du clavier

Préférez <select> natif dans la plupart des cas.

Lire la valeur sélectionnée en JavaScript

Obtenez ou définissez la valeur sélectionnée avec JavaScript :

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Modèle d’option d’espace réservé

Créez une option d’espace réservé qui ne peut pas être sélectionnée :

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Vérification rapide

Quel élément regroupe les options associées dans un menu déroulant select ?

Récapitulatif : select et option

Points essentiels des menus déroulants :

  • <select> + <option> — menu déroulant
  • value sur option — valeur envoyée au serveur
  • selected — présélectionne une option
  • <optgroup label> — regroupe les options associées
  • multiple — autorise plusieurs sélections
  • size — affiche N options sans menu déroulant

Questions Fréquemment Posées

La leçon « Menus déroulants Select et option » est-elle gratuite ?

Oui — le texte complet de « Menus déroulants Select et option » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Menus déroulants Select et option » ?

Créez des menus de sélection déroulants avec `select` et `option`. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Menus déroulants Select et option » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Menus déroulants Select et option
  2. `Textarea` pour les saisies multilignes
  3. Groupes de cases à cocher et de boutons radio
  4. `Datalist` pour la saisie semi-automatique
← Retour à HTML Academy