In-depth understanding of the role and use of labels in HTML (with code)

Form layout is often used in work. Label tags will be encountered in form layout. Many novices may ignore label tags when learning, and some people have only a little knowledge of label tags. Next, let’s share with you Let’s talk about what label means? What is the use of label label?

You will encounter the use of label tags in form layout. In fact, label does not have any style effect and has the function of triggering the corresponding form control. For example, when we click the radio button or the text corresponding to the multi-select box, the option can be selected. This is the effect achieved by adding the label to the text.

1. How to use the label label

The label label defines the label (mark) for the input element. It will not present any special effects to the user, and span Tags are similar. But the biggest difference between the label label and the span label is that it improves usability for mouse users and can be associated with specific form controls.
After the label label is associated with a specific form control, if the user clicks the text within the label element, the associated form control will be triggered. That is to say, when the user selects the label label, the browser will automatically turn the focus to the form control related to the label label. When the label text is clicked, in order for the corresponding control to be selected, the value of the corresponding form control id needs to be the same as the for value in the label label.

2. Label syntax

##male

Label label text is more necessary Fill in the value of the for attribute in the
Label tag to be customized, which is generally the same as the ID of the control object that you want to trigger when clicking.

3. Practical application of label

The HTML code snippet is as follows:

<form action="" method="get"> 
性别：<br /> 
<input name="sex" id="man" type="radio" value="" /> 
<label for="man">男</label> 
<input name="sex" id="woman" type="radio" value="" /> 
<label for="woman">女</label> 
</form>

Note: The value of id in the input tag and the value of for in the label tag correspond.

Look at the picture:

Summary: Generally, it is necessary to click the radio button box text or the multi-select button box text corresponding to the selection button to be selected, and use the label label That's it. Note that for and id have the same value. Label tags do not have any styles by default. You can use CSS to set css width, css height, css border and other styles. Novices can type more code and try more. I hope this tutorial can help you.

The above is the detailed content of In-depth understanding of the role and use of labels in HTML (with code). For more information, please follow other related articles on the PHP Chinese website!