Liste déroulante HTML

Introduction

L'élément Sélection HTML est utilisé pour créer une liste déroulante qui permet aux utilisateurs de choisir une ou plusieurs options dans la liste donnée. Dans ce laboratoire, vous allez apprendre à utiliser la balise Sélection HTML pour créer une liste d'éléments que l'utilisateur peut sélectionner.

Note : Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/forms -.-> lab-70833{{"Liste déroulante HTML"}} html/form_group -.-> lab-70833{{"Liste déroulante HTML"}} html/form_access -.-> lab-70833{{"Liste déroulante HTML"}} html/inter_elems -.-> lab-70833{{"Liste déroulante HTML"}} html/custom_attr -.-> lab-70833{{"Liste déroulante HTML"}} end

Création d'un élément Sélection

Pour créer un élément Sélection, nous utilisons la balise Sélection HTML avec les balises d'ouverture et de fermeture. Voici un exemple de création d'un élément Sélection simple.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Le code ci-dessus crée un élément Sélection simple avec quatre options : Volvo, Saab, Opel et Audi.

Ajout d'attributs à l'élément Sélection

Nous pouvons ajouter des attributs à l'élément Sélection pour le rendre plus interactif pour les utilisateurs. Voici quelques-uns des attributs importants de l'élément Sélection HTML.

A : Attribut Size

L'attribut size spécifie combien d'options doivent être visibles en même temps. Voici un exemple :

<select size="3">
  <!-- trois options sont visibles par défaut -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B : Attribut Name

L'attribut Name attribue un nom à l'élément Sélection. Voici un exemple :

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C : Attribut Multiple

L'attribut multiple permet aux utilisateurs de sélectionner plusieurs options en même temps. Voici un exemple :

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Définition des options

Vous pouvez ajouter un nombre quelconque d'options à un élément Sélection en utilisant la balise option. Voici un exemple :

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Comme vous pouvez le voir, nous avons défini quatre options et chaque option a un attribut value. L'attribut value peut être utilisé pour associer chaque option à une valeur unique.

Utilisation d'options groupées

Vous pouvez regrouper les options sous une balise <optgroup>. Cela rend votre élément Sélection plus organisé et plus lisible. Voici comment vous pouvez utiliser des options groupées :

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Création de valeurs par défaut

Vous pouvez spécifier une valeur par défaut qui sera affichée lorsque la page est chargée. Voici comment définir une valeur par défaut :

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Dans cet exemple, l'option "Opel" sera sélectionnée par défaut.

Récapitulatif

Dans ce laboratoire, vous avez appris à créer une liste déroulante à l'aide de la balise Sélection HTML, les différents attributs qui peuvent être utilisés avec la balise Sélection, comment définir les options, utiliser des options groupées et créer des valeurs par défaut. Avec ces compétences, vous devriez être en mesure de créer des éléments Sélection plus avancés qui peuvent aider les utilisateurs à interagir facilement avec vos sites web.