Introduction détaillée à la balise label en HTML

Introduction à la balise label

La balise label définit l'étiquette (marque) pour l'élément d'entrée , il ne présentera aucun effet spécial à l'utilisateur, similaire à la balise span. Mais la plus grande différence entre l'étiquette label et l'étiquette span est qu'elle améliore la convivialité pour les utilisateurs de souris et peut être associée à des contrôles de formulaire spécifiques.

Une fois l'étiquette d'étiquette associée à un contrôle de formulaire spécifique, si l'utilisateur clique sur le texte dans l'élément d'étiquette, le contrôle de formulaire associé sera déclenché. C'est-à-dire que lorsque l'utilisateur sélectionne l'étiquette d'étiquette, le navigateur mettra automatiquement le focus sur le contrôle de formulaire lié à l'étiquette d'étiquette.

Principaux scénarios d'utilisation

La balise d'étiquette est souvent utilisée pour s'associer à une case à cocher ou à une radio, afin que la case à cocher ou la radio puisse être sélectionnée /annulé en cliquant sur le texte. Comme le montre la figure ci-dessous, cliquer sur le texte a le même effet que cliquer sur le bouton radio précédent, c'est-à-dire que la zone cliquable du contrôle est agrandie, car cliquer sur l'étiquette ou le contrôle activera le contrôle, qui est particulièrement utile pour les cases à cocher et les boutons radio.

Comment les balises d'étiquette sont associées à des éléments de formulaire spécifiques

Il existe deux manières principales d'associer les balises d'étiquette, Afficher l'association Association implicite avec  :

Méthode 1 : Association explicite

L'association explicite se fait via la balise label for Propriété qui est explicitement associé à un autre contrôle de formulaire. Il convient de noter que la valeur de l'attribut for doit être le id de l'élément de formulaire marquable dans le même document que la balise label. Notez qu'il s'agit de l'identifiant et non du nom. Par exemple :

爱好：
<input type=&#39;checkbox&#39; name=&#39;basket&#39; id=&#39;basketball&#39;>   
<label for="basketball">篮球</label>
<input type=&#39;checkbox&#39; name=&#39;football&#39; id=&#39;football&#39;>   
<label for="football">足球</label>

Rendu :

Association implicite

L'association implicite consiste à placer directement le contrôle du formulaire sur l'étiquette Au sein de l'étiquette, dans ce cas, l'étiquette label ne peut contenir qu'un seul élément de formulaire, et plusieurs éléments ne sont valables que pour le premier. Comme suit :

<label>点击我可以使文本框获得焦点    <input type=&#39;text&#39; name=&#39;theinput&#39; id=&#39;theinput&#39;></label>

Le rendu est le suivant. Cliquez sur le texte pour focaliser la zone de texte :

Les avantages et inconvénients de l'association d'affichage et implicite. association :

Avantages explicites de l'association :

1. peut réduire le nombre de niveaux d'imbrication des étiquettes
2. les étiquettes et les formulaires d'étiquettes peuvent se trouver à différents endroits

Inconvénients de l'association d'affichage :

1. Le contrôle doit définir l'attribut id
2. L'étiquette label et le contrôle formulaire ne sont pas propices au contrôle dans son ensemble

Association implicite Avantages :

1. Le contrôle n'a pas besoin de définir un identifiant
2. L'étiquette et le contrôle sont pratiques à contrôler dans leur ensemble

Association implicite Inconvénients :

1. Augmentation du nombre de niveaux d'imbrication d'étiquettes
2. Vous ne pouvez pas placer les étiquettes et les contrôles associés à des emplacements différents

Ce qui précède est mon point de vue personnel sur les deux méthodes, vous pouvez les utiliser selon vos besoins. Choisissez d'être explicite ou implicite.

Prise en charge par le navigateur des balises d'étiquette et des éléments de formulaire associés

Tous les principaux navigateurs prennent en charge les balises d'étiquette. Safari 2 ou version antérieure ne prend pas en charge les balises d'étiquette.

Les éléments du formulaire qui peuvent être utilisés pour afficher les associations sont :

• input type="text" zone de texte Lorsque l'on clique sur l'étiquette, la zone de texte associée obtient le focus.
• input type="checkbox" Cochez, cochez ou décochez la case lorsque vous cliquez sur l'étiquette.
• input type="radio" Bouton radio, sélectionnez le bouton radio lorsque vous cliquez sur l'étiquette.
• input type="file" Téléchargement de fichier, la boîte de dialogue de sélection de fichier s'ouvre lorsque vous cliquez sur la balise.
• input type="password" Zone de mot de passe, la zone de mot de passe devient active lorsque l'on clique sur l'étiquette.
• textarea Champ de texte, le champ de texte obtient le focus lorsque l'on clique sur l'étiquette.
• select Zone déroulante, lorsque vous cliquez sur l'étiquette, la zone déroulante obtient le focus, mais les options de la zone déroulante ne sont pas développées.

L'attribut form de la balise label

L'attribut form spécifie le formulaire auquel appartient l'élément label label. Comme indiqué ci-dessous, bien que l'étiquette label se trouve en dehors du formulaire myform, elle appartient toujours au formulaire myform. Comme suit :

<form action="http://songguoliang.com/test.html" id="myform">
  <input type="radio" name="sex" id="male" value="male">
  <br>
  <label for="female">女</label>

  <input type="submit" value="提交"></form><label for="male" form="myform">男</label>

Le rendu est le suivant. Cliquez sur "Mâle" pour sélectionner également le premier bouton radio

Remarque :
Cet attribut de formulaire a été modifié. en 2016 Retiré de la spécification HTML le 28 avril. Cependant, les scripts peuvent toujours accéder à la propriété HTMLLabelElement.form en lecture seule ; elle renvoie le formulaire dont le contrôle associé à l'étiquette est membre, ou null si l'étiquette n'est pas associée à un contrôle ou si le contrôle ne fait pas partie du formulaire.

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://pocket.blog.csdn.net/article/details/72852150

Tutoriel recommandé : "Tutoriel HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!