Detailed introduction to the label tag in HTML

label label introduction

The label label defines the label (mark) for the input element, it will not Present any special effects to the user, similar to the span tag. But the biggest difference between the label label and the span label is that it improves usability for mouse users and can be associated with specific form controls.

After the label label is associated with a specific form control, if the user clicks the text within the label element, the associated form control will be triggered. That is to say, when the user selects the label label, the browser will automatically turn the focus to the form control related to the label label.

Main usage scenarios

label labels are often used to associate with checkbox or radio, so that the checkbox or radio can be selected/cancelled by clicking text. As shown in the figure below, clicking on text has the same effect as clicking on the previous radio button, that is, the clickable area of ​​the control is enlarged, because clicking on the label or control will activate the control, which is especially useful for check boxes and radio buttons.

How label labels are associated with specific form elements

There are two main ways to associate label labels, Display association Implicit association with :

Method 1: Explicit association

The explicit association is through the label tagfor Property that is explicitly associated with another form control. It should be noted that the value of the for attribute must be the id of the markable form element in the same document as the label label. Note that it is the id rather than the name. For example:

爱好：
<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>

Rendering:

Implicit association

The implicit association is to directly place the form control on the label Within the label, in this case, the label label can only contain one form element, and multiple ones are only valid for the first one. As follows:

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

The rendering is as follows. Click on the text to focus the text box:

The advantages and disadvantages of display association and implicit association:

Explicit association advantages:

1. Can reduce the number of label nesting levels
2. label labels and forms can be in different locations

Disadvantages of display association:

1. The control needs to define the id attribute
2. The label label and the form control are not conducive to control as a whole

Implicit association Advantages:

1. The control does not need to define an id
2. The label and control are convenient to control as a whole

Implicit association Disadvantages:

1. Increased the number of label nesting levels
2. You cannot place labels and associated controls in different locations

The above are my personal views on the two methods, you can use them as needed Choose to be explicit or implicit.

Browser support for label tags and associated form elements

All major browsers support label tags. Safari 2 or earlier does not support label tags.

The form elements that can be used to display associations are:

• input type="text" text box. When the label is clicked, the associated text box gets focus.
• input type="checkbox" Checkbox, check or uncheck the checkbox when clicking the label.
• input type="radio" Radio button, select the radio button when clicking the label.
• input type="file" File upload, the file selection dialog box will be opened when the label is clicked.
• input type="password" Password box, the password box gets focus when the label is clicked.
• textarea Text area, the text area gets focus when the label is clicked.
• select Drop-down box, when the label is clicked, the drop-down box gets focus, but the drop-down box options are not expanded.

The form attribute of the label label

The form attribute specifies the form to which the label label element belongs. As shown below, although the label label is outside the myform form, it still belongs to the myform form. As follows:

<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>

The rendering is as follows, click "Male" to also select the first radio button

Note:
This form attribute has been changed in 2016 Removed from the HTML specification on April 28. However, scripts can still access the read-only HTMLLabelElement.form property; it returns the form that the label's associated control is a member of, or null if the label is not associated with a control or the control is not part of the form.

Thank you everyone for reading, I hope you will benefit a lot.

This article is reproduced from: https://pocket.blog.csdn.net/article/details/72852150

Recommended tutorial: "HTML Tutorial"

The above is the detailed content of Detailed introduction to the label tag in HTML. For more information, please follow other related articles on the PHP Chinese website!