Étiquette pour l'Élément d'Entrée

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, cela se concentre automatiquement sur le champ de saisie correspondant.

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

Enveloppant

En imbriquant un élément de formulaire, tel qu'un champ <input/>, dans 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" mettra 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 liez 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 de l'attribut id doit être la même. Par exemple :

Dans ce cas, l'étiquette est associée au champ de saisie en utilisant l'attribut for sur l'étiquette et l'attribut id sur le champ de saisie. Cliquer sur le texte de l'étiquette "Nom" mettra également le focus sur le champ de saisie correspondant.

Remarque

En utilisant ces méthodes, vous établissez une connexion visuelle et sémantique entre le label et le champ input. Cependant, il peut y avoir des situations où il est impossible d'envelopper l'élément input dans le label en raison de contraintes de style ou de logique du site web. Dans de tels cas, vous vous appuyez généralement sur les connexions d'attributs pour maintenir 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 examinant le code dans l'image.

Remarque

Du point de vue du navigateur, l'approche choisie pour établir la connexion est sans importance. Les deux méthodes aboutissent au même résultat de lier l'étiquette et le champ de saisie ensemble pour une meilleure convivialité et accessibilité.