L'étiquette label

La balise label définit un libellé pour un champ de saisie de type input, textarea, select et ainsi de suite.

Le libellé est associé à un champ de saisie spécifique à l'aide de l'attribut for. Celui-ci doit contenir la valeur de l'attribut id du champ de saisie auquel le libellé est lié. Le libellé est également associé à l'élément si cet élément est placé à l'intérieur de la balise label. Dans ce cas, il n'est pas nécessaire de spécifier l'attribut for. Consultez les exemples pour une meilleure compréhension.

En cliquant sur le libellé, les cases à cocher ou les boutons radio qui lui sont associés changeront leur état de coché à décoché et vice versa. Le libellé est dans ce cas utile pour la commodité : il est difficile de viser les petits éléments de formulaire avec le curseur, alors qu'un long libellé avec du texte est beaucoup plus facile à cliquer.

Le champ de saisie texte associé au libellé de type input et textarea recevra le focus. Le focus , c'est lorsque le curseur clignote dans le champ de saisie, dans ce cas, si vous tapez quelque chose sur le clavier - le texte entrera dans ce champ (voir la pseudo-classe focus pour une compréhension avancée du focus).

Le libellé label peut être utilisé pour imiter une case à cocher ou un bouton radio. Ceci est nécessaire pour créer une checkbox ou un radio avec son propre design (ce qui est interint en CSS, mais possible grâce à des astuces astucieuses).

Attributs

Attribut	Description
for	Cet attribut doit contenir la valeur du attribut id du champ de saisie auquel le libellé label est associé.
accesskey	Définit une touche de raccourci permettant d'accéder à l'élément de formulaire associé au libellé (via l'attribut for). Pour plus de détails, voir l'attribut accesskey.

Exemple . Case à cocher

Associons une étiquette à une case à cocher checkbox en utilisant l'attribut for. Cliquez sur l'étiquette et vous verrez l'état de la case à cocher changer de coché à décoché et vice versa :

:

Exemple . À l'intérieur de label

Maintenant, n'associons pas l'étiquette via l'attribut for, mais plaçons l'élément directement à l'intérieur de la balise label, dans ce cas, en cliquant sur le texte de label, nous activerons également l'élément :

:

Exemple . Champ de saisie texte

Associons une étiquette à la balise input en utilisant l'attribut for. Cliquer sur l'étiquette fera obtenir le focus au champ de saisie. Le texte contenu dans le champ (ajouté via l'attribut value) sera alors sélectionné. Si vous commencez à taper quoi que ce soit sur le clavier - ce texte sera effacé. Pour se débarrasser de la sélection sans supprimer le texte, vous pouvez cliquer avec la souris dans le champ de saisie : le focus ne disparaîtra pas, mais la sélection disparaîtra :

:

Voir aussi