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

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.