Étiquette d'entrée HTML

Introduction

La balise HTML <label> est utilisée pour ajouter une légende ou un texte d'étiquette à n'importe quel élément HTML sur la page web. Dans ce laboratoire, nous allons apprendre à utiliser la balise <label> en HTML.

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

Ajouter une étiquette à un élément d'entrée

1. Ouvrez le fichier index.html dans votre éditeur de texte préféré.
2. Ajoutez le code suivant pour créer un élément d'entrée avec une étiquette :

<label for="name">Nom :</label> <input type="text" id="name" name="name" />

3. L'attribut for de l'élément label doit correspondre à l'attribut id de l'élément d'entrée avec lequel il est associé.

Utiliser l'élément label pour créer une zone cliquable

1. Ouvrez le fichier index.html dans votre éditeur de texte préféré.
2. Ajoutez le code suivant pour créer une zone cliquable autour d'un élément d'entrée :

<label>
  <input type="checkbox" />
  Cliquez ici pour sélectionner
</label>

3. En cliquant sur le texte "Cliquez ici pour sélectionner", la case à cocher sera désormais sélectionnée.

Associé une étiquette à un élément de formulaire

1. Ouvrez le fichier index.html dans votre éditeur de texte préféré.
2. Ajoutez le code suivant pour créer un élément de formulaire avec une étiquette :

<form action="/" method="post">
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Soumettre" />
</form>

3. L'attribut for de l'élément label doit correspondre à l'attribut id de l'élément de formulaire avec lequel il est associé.

Styliser une étiquette

1. Ouvrez le fichier index.html dans votre éditeur de texte préféré.
2. Ajoutez le code suivant pour créer un élément d'étiquette avec une classe CSS :

<label class="large-label" for="name">Nom :</label>
<input type="text" id="name" name="name" />

3. Ajoutez le CSS suivant à votre feuille de style pour styliser l'étiquette :

.large-label {
  font-size: 24px;
  font-weight: bold;
}

Utiliser l'élément label pour améliorer l'accessibilité

1. Ouvrez le fichier index.html dans votre éditeur de texte préféré.
2. Ajoutez le code suivant pour créer un élément d'entrée avec une étiquette pour l'accessibilité des lecteurs d'écran :

<label for="name">Nom :</label>
<input type="text" id="name" name="name" aria-label="Entrez votre nom" />

3. L'attribut aria-label fournit une étiquette textuelle pour l'élément d'entrée qui est accessible aux lecteurs d'écran.

Récapitulatif

Dans ce laboratoire, nous avons appris à utiliser la balise HTML <label> pour ajouter des légendes ou du texte d'étiquette à des éléments HTML sur une page web. La balise <label> est utile pour améliorer l'accessibilité et augmenter la zone cliquable d'un élément. Nous avons également appris à associer des étiquettes à des éléments de formulaire et à styliser des étiquettes à l'aide de CSS.