What is the function of the for property of the HTML label label? About the label label for property introduction

This article mainly describes some of the functions of the for property of the HTML label label and some examples of its use, so let's take a look at this article.

First, let's look at the for property about label Labels:

<label> is designed to serve the input element, defining tags for it.

The For property specifies which form element the label binds to

There are two more ways to bind a label and a form control:

1. Use the form control as the content of the label so that it is a hermit binding.

The For property is not required at this time, and the bound control does not require an ID property.

Implicit binding:

<label>date of Birth: <input type= "text" name= "DOFB"/></label>

2. Name the ID of the target form for the for property under the <label> tag, which is the display binding.

Explicit binding:

<label for= "ssn" >social Security number:</label><input type= "text" name= "Socsecnum" id= "ssn"/>

Why should I add a for property to <label>?

Adding the For property to <label> after binding the input control, you can improve the user experience of the mouse user.

This control is triggered if the text is clicked within the label element. That is, when the user renders the label, the browser automatically shifts the focus to the label-related form controls.

There is also a for property function for the HTML label label:

The effect of the label label's for property is that the mouse clicks the "female" implementation radio the selected effect, mainly

Thanks to FOR=NV and must require the input text box ID also equals NV, male This radio for contrast, no this effect

<div><label for= "Nan1" > Male </label><input type= "checkbox" Id= "nan"/><label for= "NV" > Female </label><input type= "checkbox" Id= "NV"/></div>

The effect that the code displays in the browser

The chart is a marquee that can be selected more than once. We can all use the experimental experiment.

Look at an instance of the For property for an HTML label label

A form with two tabbed radio buttons:

<form action= "demo_form.asp" ><label for= "male" >php Chinese web </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

This diagram is a radio button and cannot be selected more than one.

The above is the entire content of this article, about the label label for the property content, I hope everyone can practice, if you do not know the address of the practice, you can come to topic.alibabacloud.com, video tutorial in the actual combat, that inside can copy your code up to see the effect. If you have questions, you can ask below.