La balise <select> est un élément fondamental des formulaires HTML qui permet de créer des listes déroulantes interactives. Que vous souhaitiez proposer un choix de pays, de catégories ou de préférences, cette balise offre une interface utilisateur intuitive et compacte pour présenter de multiples options.
Maîtriser la balise <select> est essentiel pour tout développeur web souhaitant créer des formulaires professionnels et accessibles. Si vous débutez en HTML, notre formation complète sur HTML vous guidera pas à pas dans la création de formulaires interactifs.
La balise <select> permet de réduire considérablement l'espace occupé par un formulaire tout en offrant de nombreuses options de choix à vos utilisateurs 📋
Définition et syntaxe de base
Structure fondamentale
La balise <select> fonctionne comme un conteneur qui regroupe plusieurs options parmi lesquelles l'utilisateur peut effectuer son choix. Elle s'utilise toujours en combinaison avec des balises <option> qui définissent chaque élément de la liste.
<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 une liste déroulante permettant de choisir une formation. L'attribut name identifie le champ lors de l'envoi du formulaire, tandis que l'attribut value de chaque option définit la valeur transmise au serveur.
Caractéristiques principales
La balise <select> possède plusieurs caractéristiques essentielles à comprendre :
- Elle crée automatiquement une interface de liste déroulante native au navigateur
- Par défaut, la première option est sélectionnée
- Elle peut être utilisée à l'intérieur d'un élément
formpour l'envoi de données - Le style visuel varie selon le navigateur et le système d'exploitation
- Elle supporte la navigation au clavier de manière native
Attributs de la balise select
Attributs essentiels
Voici les attributs les plus couramment utilisés avec la balise <select> :
| Attribut | Description | Exemple |
|---|---|---|
| name | Identifie le champ pour l'envoi du formulaire | name="pays" |
| id | Identifiant unique pour le CSS et JavaScript | id="selectPays" |
| required | Rend la sélection obligatoire | required |
| disabled | Désactive la liste déroulante | disabled |
| multiple | Permet la sélection multiple | multiple |
| size | Nombre d'options visibles simultanément | size="5" |
| autofocus | Donne le focus automatiquement au chargement | autofocus |
L'attribut multiple
L'attribut multiple transforme la liste déroulante en une liste permettant plusieurs sélections simultanées. L'utilisateur peut alors maintenir la touche Ctrl (ou Cmd sur Mac) pour sélectionner plusieurs options.
<label for="competences">Sélectionnez vos compétences :</label>
<select name="competences" id="competences" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="php">PHP</option>
</select>Lorsque vous utilisez l'attribut multiple, pensez à ajouter [] au nom du champ (ex: name="competences[]") si vous utilisez PHP côté serveur, afin de recevoir un tableau de valeurs.
L'attribut size
L'attribut size définit le nombre d'options visibles sans avoir à dérouler la liste. Cet attribut est particulièrement utile en combinaison avec multiple pour afficher plusieurs options à la fois.
<select name="niveau" size="3">
<option value="debutant">Débutant</option>
<option value="intermediaire">Intermédiaire</option>
<option value="avance">Avancé</option>
<option value="expert">Expert</option>
</select>
Les balises option et optgroup
La balise option
Chaque élément de la liste déroulante est défini par une balise <option>. Cette balise accepte plusieurs attributs importants :
<select name="statut">
<option value="" disabled selected>Choisissez un statut</option>
<option value="actif">Actif</option>
<option value="inactif">Inactif</option>
<option value="attente">En attente</option>
</select>Dans cet exemple, la première option sert de placeholder grâce à la combinaison des attributs disabled et selected. Elle guide l'utilisateur sans pouvoir être réellement sélectionnée lors de la soumission.
Attributs de la balise option
| Attribut | Description |
|---|---|
| value | Valeur envoyée au serveur lors de la soumission |
| selected | Pré-sélectionne l'option au chargement |
| disabled | Rend l'option non sélectionnable |
| label | Texte alternatif pour l'option (rarement utilisé) |
Grouper les options avec optgroup
La balise <optgroup> permet d'organiser les options en groupes logiques, améliorant ainsi la lisibilité des longues listes déroulantes.
<label for="formation-believemy">Choisissez une formation Believemy :</label>
<select name="formation" id="formation-believemy">
<option value="">Sélectionnez une formation</option>
<optgroup label="Développement Web">
<option value="html">HTML - Les fondamentaux</option>
<option value="css">CSS - Maîtriser le design</option>
<option value="javascript">JavaScript - Dynamiser vos pages</option>
</optgroup>
<optgroup label="Développement Backend">
<option value="python">Python - Programmation</option>
<option value="php">PHP - Sites dynamiques</option>
<option value="nodejs">Node.js - JavaScript côté serveur</option>
</optgroup>
<optgroup label="Base de données">
<option value="mysql">MySQL - Requêtes SQL</option>
<option value="mongodb">MongoDB - NoSQL</option>
</optgroup>
</select>Les groupes créés par <optgroup> ne sont pas sélectionnables, ils servent uniquement à structurer visuellement les options. L'attribut label définit le texte affiché pour chaque groupe.
Exemples pratiques avancés
Formulaire d'inscription complet
Voici un exemple de formulaire d'inscription utilisant plusieurs listes déroulantes de manière professionnelle :
<form action="/inscription" method="post">
<div class="form-group">
<label for="civilite">Civilité :</label>
<select name="civilite" id="civilite" required>
<option value="">Sélectionnez</option>
<option value="mme">Madame</option>
<option value="m">Monsieur</option>
<option value="autre">Autre</option>
</select>
</div>
<div class="form-group">
<label for="pays">Pays :</label>
<select name="pays" id="pays" required>
<option value="">Choisissez votre pays</option>
<option value="FR">France</option>
<option value="BE">Belgique</option>
<option value="CH">Suisse</option>
<option value="CA">Canada</option>
<option value="LU">Luxembourg</option>
</select>
</div>
<div class="form-group">
<label for="experience">Niveau d'expérience :</label>
<select name="experience" id="experience">
<option value="debutant" selected>Débutant (0-1 an)</option>
<option value="junior">Junior (1-3 ans)</option>
<option value="confirme">Confirmé (3-5 ans)</option>
<option value="senior">Senior (5+ ans)</option>
</select>
</div>
<button type="submit">S'inscrire</button>
</form>
Liste déroulante avec JavaScript
La balise <select> s'intègre parfaitement avec JavaScript pour créer des interactions dynamiques. Voici un exemple de liste déroulante dépendante :
<label for="categorie">Catégorie :</label>
<select name="categorie" id="categorie">
<option value="">Choisissez une catégorie</option>
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
</select>
<label for="technologie">Technologie :</label>
<select name="technologie" id="technologie" disabled>
<option value="">Sélectionnez d'abord une catégorie</option>
</select>
<script>
const categorie = document.getElementById('categorie');
const technologie = document.getElementById('technologie');
const technologies = {
frontend: ['HTML', 'CSS', 'JavaScript', 'React', 'Vue.js'],
backend: ['PHP', 'Python', 'Node.js', 'Java', 'Ruby']
};
categorie.addEventListener('change', function() {
technologie.innerHTML = '';
if (this.value) {
technologie.disabled = false;
const options = technologies[this.value];
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Choisissez une technologie';
technologie.appendChild(defaultOption);
options.forEach(function(tech) {
const option = document.createElement('option');
option.value = tech.toLowerCase();
option.textContent = tech;
technologie.appendChild(option);
});
} else {
technologie.disabled = true;
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Sélectionnez d\'abord une catégorie';
technologie.appendChild(defaultOption);
}
});
</script>Ce code crée deux listes déroulantes liées : la seconde se remplit dynamiquement en fonction du choix effectué dans la première.
Accessibilité et bonnes pratiques
Associer un label
Pour garantir l'accessibilité de vos formulaires, vous devez toujours associer une balise label à votre élément <select>. Cette association peut se faire de deux manières :
<!-- Méthode 1 : Utiliser l'attribut for -->
<label for="langue">Langue préférée :</label>
<select name="langue" id="langue">
<option value="fr">Français</option>
<option value="en">English</option>
</select>
<!-- Méthode 2 : Englober le select dans le label -->
<label>
Langue préférée :
<select name="langue">
<option value="fr">Français</option>
<option value="en">English</option>
</select>
</label>Un label correctement associé permet aux lecteurs d'écran d'annoncer le but du champ, et offre une zone de clic plus grande pour les utilisateurs.
Validation et messages d'erreur
Utilisez les attributs HTML5 pour la validation native et fournissez des retours clairs aux utilisateurs :
<label for="objectif">Votre objectif d'apprentissage :</label>
<select name="objectif" id="objectif" required aria-describedby="objectif-aide">
<option value="">Sélectionnez un objectif</option>
<option value="reconversion">Reconversion professionnelle</option>
<option value="montee-competences">Montée en compétences</option>
<option value="passion">Passion personnelle</option>
</select>
<small id="objectif-aide">Ce champ nous aide à personnaliser votre parcours.</small>
Bonnes pratiques à retenir
- Toujours utiliser un
<label>associé pour l'accessibilité - Proposer une option par défaut explicite ("Sélectionnez...", "Choisissez...")
- Utiliser
<optgroup>pour les longues listes (plus de 10 options) - Éviter les listes trop longues : au-delà de 15-20 options, envisagez un champ de recherche
- Tester la navigation au clavier (tabulation, flèches, lettres)
- Utiliser l'attribut
requiredpour les champs obligatoires
Styliser un select avec CSS
Limitations du style natif
La balise <select> est notoirement difficile à styliser car son apparence est en grande partie contrôlée par le navigateur et le système d'exploitation. Cependant, quelques propriétés CSS peuvent être appliquées :
select {
/* Dimensions et espacement */
width: 100%;
padding: 12px 16px;
/* Bordures et arrondis */
border: 2px solid #e0e0e0;
border-radius: 8px;
/* Typographie */
font-family: inherit;
font-size: 16px;
color: #333;
/* Fond et apparence */
background-color: #ffffff;
cursor: pointer;
/* Supprime l'apparence native (attention à l'accessibilité) */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Ajoute une flèche personnalisée */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
}
select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
select:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
Style des options
Les possibilités de stylisation des balises <option> sont très limitées. Seules quelques propriétés fonctionnent de manière cohérente :
option {
padding: 8px;
background-color: #ffffff;
color: #333;
}
option:disabled {
color: #999;
}
optgroup {
font-weight: bold;
font-style: normal;
}Pour un contrôle total sur l'apparence, vous devrez utiliser des bibliothèques JavaScript comme Select2, Choices.js ou créer un composant personnalisé. Attention cependant à préserver l'accessibilité !
Compatibilité navigateurs
La balise <select> bénéficie d'une excellente compatibilité avec tous les navigateurs modernes et anciens :
| Navigateur | Version minimale | Support |
|---|---|---|
| Chrome | 1.0 | Complet |
| Firefox | 1.0 | Complet |
| Safari | 1.0 | Complet |
| Edge | 12 | Complet |
| Opera | 2.0 | Complet |
| Internet Explorer | 5.5 | Complet |
Les attributs HTML5 comme required et autofocus sont supportés par tous les navigateurs modernes depuis de nombreuses années.
Questions fréquentes sur la balise select
Quelle est la différence entre select et input type radio ?
La balise <select> est idéale lorsque vous avez plus de 4-5 options car elle économise de l'espace en affichant les choix dans une liste déroulante. Les boutons radio (<input type="radio">) sont préférables pour un petit nombre d'options (2-4) car ils permettent à l'utilisateur de voir toutes les possibilités immédiatement sans interaction supplémentaire.
Comment pré-sélectionner une option dans un select ?
Pour pré-sélectionner une option, ajoutez l'attribut selected à la balise <option> concernée. Par exemple : <option value="fr" selected>France</option>. Une seule option peut avoir cet attribut (sauf si multiple est utilisé).
Comment récupérer la valeur sélectionnée en JavaScript ?
Vous pouvez utiliser la propriété value de l'élément select : document.getElementById('monSelect').value. Pour les sélections multiples, utilisez selectedOptions qui retourne une collection des options sélectionnées.
Comment puis-je apprendre HTML de manière approfondie ?
Pour maîtriser HTML et créer des formulaires professionnels, notre formation pour débuter en HTML vous accompagne étape par étape. Vous apprendrez à utiliser toutes les balises de formulaire, y compris <select>, avec des exercices pratiques et des projets concrets.