What is the function of the for attribute of the html label tag? Introduction to the for attribute of label label

This article mainly introduces some functions of the for attribute of the html label tag and some examples of its use. Now let us take a look at this article.

First of all we Take a look at the introduction of the for attribute of the label label:

is designed to serve the input element and define tags for it.

The for attribute specifies which form element the label is bound to.

There are two ways to bind the label to the form control:

1. Bind the form control As the content of label, this is hermit binding.

The for attribute is not needed at this time, and the bound control does not need the id attribute.

Implicit binding:

<label>Date of Birth: <input type="text" name="DofB" /></label>

2. Name the id of the target form for the for attribute under the label. This is explicit binding.

Explicit binding:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

Why should we add the for attribute to ?

After adding the for attribute to and binding the input control, the user experience of mouse users can be improved.

If you click the text within the label element, this control will be triggered. That is, when the user renders the label, the browser will automatically turn focus to the form control related to the label.

There is also the effect of the for attribute of the html label label:

The effect of the for attribute of the label label is that clicking "female" with the mouse achieves the effect of radio selection, mainly

Thanks to for=nv and it must be required that the id of the input text box is also equal to nv. For comparison, the male radio does not have this effect.

<div>
<label for="nan1">男</label>
<input type="checkbox" id="nan" />
<label for="nv">女</label>
<input type="checkbox" id="nv" />
</div>

The effect of the code displayed in the browser is as follows:

The picture is a check box that can be selected multiple times. Everyone can use it to experiment.

Let’s look at an example of the for attribute of the html label tag

A form with two radio buttons with labels:

<form action="demo_form.asp">
<label for="male">php中文网</label>
<input type="radio" name="sex" id="male" value="male"/>
<label for="female">html</label>
<input type="radio" name="sex" id="female" value="female"/>
<input type="submit" value="Submit"/>
</form>

The effect of this is as shown in the picture:

This picture is a radio button and cannot be selected multiple times.

The above is the entire content of this article. Regarding the content of the for attribute of the label tag, I hope everyone can practice it. If you don’t know the address of the practice, you can come to the PHP Chinese website and practice in the video tutorial. You can copy your code there and see the effect. If you have any questions, you can ask below.

【Editor's Recommendation】

How to wrap the html code tag? This article gives you a thorough understanding of the use of code phrases

html Is the tbody tag a block-level element? Basic usage of html tbody tag

The above is the detailed content of What is the function of the for attribute of the html label tag? Introduction to the for attribute of label label. For more information, please follow other related articles on the PHP Chinese website!