L’élément <label> est utilisé pour associer une étiquette à un champ de saisie dans un formulaire. Cette association aide les utilisateurs à comprendre les informations demandées dans le champ du formulaire. Lorsqu’un utilisateur clique sur l’étiquette, le focus est automatiquement placé sur le champ de saisie correspondant.

Il existe deux façons de relier les éléments label et input :

Imbrication

En imbriquant un élément de formulaire, tel qu’un champ <input/>, à l’intérieur d’un élément <label>, le navigateur établit automatiquement un lien entre l’étiquette et le champ de saisie. Par exemple :

Dans cet exemple, cliquer sur le texte de l'étiquette « Nom » placera automatiquement le focus sur le champ de saisie correspondant.

Utilisation de l'attribut id

Lorsqu'un élément de formulaire n'est pas imbriqué dans un élément <label>, vous les reliez manuellement en utilisant l'attribut id de l'élément input et l'attribut for de l'élément label. La valeur de l'attribut for et celle de l'attribut id doivent être identiques. Par exemple :

Dans ce cas, l'étiquette est associée au champ de saisie à l'aide de l'attribut for sur l'étiquette et de l'attribut id sur le champ de saisie. Cliquer sur le texte de l'étiquette « Nom » placera également le focus sur le champ de saisie correspondant.

Remarque

En utilisant ces méthodes, vous établissez un lien visuel et sémantique entre le label et le champ input. Cependant, il peut exister des situations où il est impossible d'imbriquer l'élément input dans le label en raison de contraintes de style ou de la logique du site web. Dans ces cas, il est courant de s'appuyer sur la connexion par attributs afin de conserver la flexibilité dans l'application des styles et la mise en œuvre de la logique de fond.

Examinons la différence entre les deux approches en analysant le code présenté dans l'image.

Remarque

Du point de vue du navigateur, l'approche choisie pour établir la connexion est sans importance. Les deux méthodes permettent d'associer le label et le champ de saisie afin d'améliorer l'utilisabilité et l'accessibilité.