Quelle est la fonction de la balise d'étiquette HTML ? Explication détaillée de la façon d'utiliser la balise label html

Cet article présente principalement l'introduction de l'étiquette html Dare, ainsi que les principaux scénarios d'utilisation de l'étiquette html, et enfin il y a des commentaires sur l'étiquette html. Jetons maintenant un œil à cet article

Tout d'abord, jetons un œil à l'introduction de la balise label html :

La balise label définit l'étiquette (marque) pour l'élément d'entrée, qui aucun effet spécial ne sera présenté à 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.

Les principaux scénarios d'utilisation de la balise label html :

La balise label 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é/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.

Parlons maintenant de l'utilisation de la balise html label :

2e1cf0710519d5598b1f0f14c36ba674 L'élément label ne présente aucun effet spécial à l'utilisateur. Cependant, cela améliore la convivialité pour les utilisateurs de souris. Ce contrôle est déclenché si vous cliquez sur le texte à l'intérieur de l'élément label. C'est-à-dire que lorsque l'utilisateur sélectionne l'étiquette, le navigateur mettra automatiquement le focus sur le contrôle de formulaire lié à l'étiquette. 2e1cf0710519d5598b1f0f14c36ba674 L'attribut for de l'étiquette doit être le même que l'attribut id de l'élément associé. Exemple de formulaire HTML simple avec deux champs de saisie et balises associées :

<form> 
<label for="male">两个人</label> 
<input type="radio" name="sex" id="male" />
<label for="female">一个人</label> 
<input type="radio" name="sex" id="female" />
</form>

Il s'agit d'un bouton radio, il n'est donc pas nécessaire d'afficher l'effet.

Enfin, jetons un œil aux commentaires sur la balise html label :

Pour lier LABEL à d'autres contrôles, définissez l'attribut FOR de l'élément LABEL sur The même identifiant que le contrôle. Lier LABEL à la propriété NAME du contrôle est inutile. Cependant, pour soumettre le formulaire, vous devez spécifier un nom pour le contrôle auquel l'élément LABEL est lié.

Il existe deux façons de souligner la touche de raccourci spécifiée. La prise en charge du texte enrichi pour l'élément LABEL permet l'ajout d'éléments U de chaque côté du caractère accélérateur spécifié par l'attribut ACCESSKEY. Si vous préférez utiliser une feuille de style (CSS) pour appliquer le style, vous pouvez inclure le caractère dans un SPAN et définir le style sur "text-decoration: underline".

Si l'utilisateur clique sur LABEL, l'événement onclick sur LABEL sera déclenché en premier, puis l'événement onclick sur le contrôle spécifié par l'attribut htmlFor sera déclenché. Appuyer sur la touche de raccourci définie par LABEL définira le focus mais ne déclenchera pas l'événement onclick.

[Recommandation de la rédaction]

Comment envelopper la balise de code html ? Cet article vous donnera une compréhension approfondie de l'utilisation des expressions de code

Comment écrire du code spatial html ? Résumé de l'expression du code spatial 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!