1. Description de la balise <label>

La balise <label> est utilisée en HTML pour associer un libellé textuel à un élément de formulaire, tel qu'un champ de texte, une case à cocher (checkbox), un bouton radio, ou un menu déroulant. Cette association permet d'améliorer l'accessibilité et l'expérience utilisateur lorsqu'il interagit avec un formulaire en fournissant une étiquette explicite pour l'élément de formulaire correspondant. Finalement la balise <label> est un élément essentiel pour améliorer l'accessibilité et la convivialité des formulaires HTML en fournissant des libellés clairs et en facilitant l'interaction utilisateur avec les éléments de formulaire. Elle est largement utilisée pour rendre les formulaires web plus compréhensibles et plus faciles à utiliser pour tous les utilisateurs.

2. Syntaxe de la balise <label>

Où:

1. La balise <label> : contient le texte "Nom :" qui servira de libellé pour le champ de texte.
2. L'attribut for : de la balise <label> est utilisé pour indiquer l'ID de l'élément de formulaire auquel le libellé est associé.
3. <input> : Définit l'élément de formulaire lui-même
4. L'attribut id : correspondant à la valeur de l'attribut for de la balise <label>.
5. Cette association entre le libellé et l'élément de formulaire : permet aux utilisateurs de cliquer sur le libellé pour mettre en surbrillance ou activer l'élément de formulaire associé, améliorant ainsi la convivialité du formulaire.

3. Exemples d'usages de la balise <label>

3.1 Groupement des éléments de formulaire

Vous pouvez regrouper plusieurs éléments de formulaire sous un même libellé en les enveloppant tous avec une balise <fieldset> et en utilisant une balise <legend> pour décrire le groupe. Par exemple :

Exemple

Cela permet d'organiser et de structurer vos formulaires de manière plus claire:

3.2 Utilisation avec les cases à cocher et les boutons radio

La balise <label> est particulièrement utile avec les cases à cocher et les boutons radio. En cliquant sur le libellé associé à une case à cocher ou un bouton radio, l'utilisateur active l'élément de formulaire correspondant. Par exemple :

Exemple

L'utilisateur peut cliquer sur "S'abonner à la newsletter" pour cocher ou décocher la case à cocher:

3.3 Utilisation sans l'attribut "for"

Bien que l'attribut for soit recommandé pour associer explicitement un libellé à un élément de formulaire, vous pouvez également encapsuler l'élément de formulaire à l'intérieur de la balise <label> sans utiliser l'attribut for. Cela fonctionnera de manière similaire :

Exemple

Voici un exemple où l'élément de formulaire est directement contenu à l'intérieur de la balise <label>, ce qui crée également une association entre le libellé et l'élément de formulaire.

Younes Derfoufi
CRMEF OUJDA