Deep understanding of the role and use of labels in HTML (with code)

In the work often use the form layout, in the form layout will encounter label label, there are many novice in learning may ignore the label label, and some people on the label label smattering, then the next chat with you about the label label is what mean? What's the use of label tags?

In the form layout you will encounter the use of label labels, in fact, the label does not have any style effect, there is trigger corresponding form control function. For example, when we click on the radio button or multi-box text corresponding options can be selected, this is the text added <label> tag to achieve the effect.

How to use a label tag

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. When you click the <label> tag text, the corresponding control is selected, and the value of the corresponding form control ID is the same as the for value within the label label.

Second, label syntax

<label for= "man" > Men </label>
Label text more needs to be filled in
The value of the for property within the label tag is custom, and is typically the same as the ID of the control object that you want to implement the click on.

Third, the actual use of the label

The HTML code snippet is as follows:

<form action= "" method= "get" > Gender: <br/> <input name= "Sex" id= "man" type= "Radio" value= ""/> <label fo R= "man" > Male </label> <input name= "sex" id= "Woman" type= "Radio" value= ""/> <label for= "Woman" > Female </ Label> </form>

Note: The value of the ID in the input tag corresponds to the value of for in the label label.

Look at the picture:

Summary: Generally to achieve the Click radio button box text or multi-select button box text corresponding selection button is selected, using the label tag, note for the same as the ID value can be achieved. Label labels do not have any styles by default, CSS widths, CSS Heights, CSS borders, and so on can be set using CSS. Novice can more knock on the code to try and hope this tutorial can help you.