What is the role of the HTML label tag? An explanation of how to use HTML label tags

This article mainly introduces the daring HTML label label, as well as the main usage of the HTML label tag, and finally the comment about the HTML label tag. Now, let's take a look at this article.

First, let's take a look at the HTML label tag introduction:

The label label defines the callout (tag) for the input element, which does not present any special effects to the user, similar to the span label. But the biggest difference between a label label and a span tag is that it improves usability for the mouse user and can associate a specific form control.

After the label label is associated with a particular form control, the associated form control is triggered if the user taps the text within the LABEL element. That is, when the user selects the label label, the browser automatically shifts the focus to the form controls associated with the label label.

Main usage scenarios for HTML label Tags:

Label tags are often used to associate with a checkbox or radio to enable click Text to select/Cancel a checkbox or radio. For example, clicking on the text and clicking on the previous Radio box has the same effect, which means that the clickable area of the control is larger, because clicking on a label or control activates the control, which is especially useful for checkboxes and radio boxes.

Now, what is the use of the HTML label tag:

The <label> tag defines the callout (tag) for the INPUT element. The label element does not present any special effects to the user. However, it improves usability for the user of the mouse. This control is triggered if you tap text inside a LABEL element. That is, when the user selects the label, the browser automatically shifts the focus to the label-related form controls. The For property of the <label> tag should be the same as the id attribute of the related element. An instance has a simple HTML form with two input fields and related tags:

<form> <label for= "male" > Two persons </label> <input type= "Radio" name= "Sex" id= "male"/><label for= "Female" > A person </label> <input type= "Radio" name= "Sex" id= "female"/></form>

This is a radio box, so you don't have to show the effect.

Finally, let's take a look at the comments about the HTML label tag:

To bind a label to another control, set the for property of the label element to be the same as the ID of the control. Binding a LABEL to the control's NAME property is useless. However, to submit a form, you must specify a NAME for the control to which the LABEL element is bound.

There are two ways to add underscores to the shortcut keys you specify. Rich text support for the LABEL element allows you to add a U element to both sides of the shortcut key character specified by the ACCESSKEY property. If you prefer to use a style sheet (CSS) to apply a style, you can include the character in SPAN and set the style to "Text-decoration:underline".

If the user clicks the label, the onclick event on the label is triggered first, and then the OnClick event on the control specified by the Htmlfor property is triggered. Pressing the shortcut key set by the LABEL sets the focus but does not trigger the onclick event.