Listes déroulantes
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 43 sur 60.
En HTML, un menu déroulant est une liste d'éléments qui apparaît lorsqu'un utilisateur clique sur un élément ou le survole. Les menus déroulants sont couramment utilisés pour présenter une liste de choix de manière compacte. Pour créer un menu déroulant, vous utilisez la balise <select> ainsi que des balises <option> pour les éléments individuels.
Voici la syntaxe de base pour créer une liste déroulante en HTML :
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: La balise qui définit le menu déroulant.
name: Un attribut qui donne un nom à la liste déroulante, lequel est utilisé pour identifier la valeur sélectionnée lors de la soumission du formulaire.
<option>: Une balise qui définit un élément dans la liste déroulante.
value: Un attribut qui spécifie la valeur associée à l'option. Cette valeur est envoyée au serveur lors de la soumission du formulaire.
Option text: Le texte visible qui apparaît dans la liste déroulante pour chaque option.
Voici un exemple de création d'une liste déroulante avec trois options :
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Dans cet exemple, nous avons une liste déroulante avec le nom "colors" et trois options : Red, Green et Blue.
Défi
FacileCréez un document HTML qui inclut un formulaire avec un menu déroulant. Le formulaire doit comporter les éléments suivants :
- Un menu déroulant avec le nom "fruits".
- Le menu déroulant doit avoir quatre options avec les valeurs et le texte suivants :
- Valeur : "apple", Texte : "Apple"
- Valeur : "banana", Texte : "Banana"
- Valeur : "orange", Texte : "Orange"
- Valeur : "grape", Texte : "Grape"
Aide-mémoire
Pour créer un menu déroulant en HTML, utilisez la balise <select> avec des balises <option> pour les éléments individuels :
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: Définit le menu déroulantname: Identifie le menu déroulant lors de la soumission du formulaire<option>: Définit chaque élément du menu déroulantvalue: La valeur envoyée au serveur lorsque l'option est sélectionnée- Texte de l'option : Le texte visible affiché dans le menu déroulant
Exemple de menu déroulant avec des options de couleur :
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page9Formulaires et entrées, partie 2
Boutons radioCases à cocherListes déroulantesBoutonsBoutons dans les formulairesRécapitulatif - Formulaires n°1Récapitulatif - Formulaires n°2