Introduce the label tag in HTML in detail-1024programmer

The relationship between label tags and specific form elements

There are two main ways to associate label tags, Display association and Implicit association:

Method 1: Explicit association

The explicit association is through the for property, 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 tag. Note that it is the id rather than the name. Such as:

Hobbies: Basketball football

Rendering:

Displays the pros and cons of association and implicit association:

Advantages of explicit association:

It can reduce the number of label nesting layers

label tags and forms can be in different positions

Disadvantages of display association:

The control needs to define the id attribute

The label tag and the form control are not conducive to controlling as a whole

Advantages of implicit association:

The control does not need to define an id

The label and the control are convenient to be controlled as a whole

Implicit Association Disadvantages:

Increased label nesting layers

Cannot place labels and associated controls in different positions

The above are personal views on the two methods, and you can choose to display or implicitly according to your needs.

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 is obtained focus.

input type="checkbox" checkbox, checkbox is checked or unchecked when the label is clicked.

input type="radio" radio button, select the radio button when clicking the label.

input type="file" File upload, open the file selection dialog box when clicking the label.

input type="password" Password box, the password box gets the focus when the label is clicked.

textarea Text area, the text area gets the focus when the label is clicked.

select The drop-down box, when the label is clicked, the drop-down box gets the focus, but the drop-down box options are not expanded.

The form attribute of the label tag

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

female male

The effect picture is as follows, click “male” to also select the first A radio button

The above is a detailed introduction to the label tags in HTML. For more information, please pay attention to other related articles on 1024programmer.com!