How to use label tag in html

This time I will introduce to you how to use the label tag in HTML. We all know that a complete form is composed of the form tag

and the various forms wrapped in itControls, then the LABEL label is a common form control.

Let’s take an example first:

[html] view plain copy
<label for="email">E-mail:</label>  
<input type="text" id="email">

Form controls are all inline elements, so they will be displayed on one line. In the web page, when we click on the word E-mai or the text box, the cursor will appear in the text box. This is the function of the label tag. To put it bluntly, the label label is an extension of the form control it is associated with. That is, clicking it with the mouse will have the same effect as clicking the form control it is associated with. The premise is that the attribute value of the label's for attribute is the same as the id of the form control you want to associate.

If you don’t want to use id to associate with for, you can also use the second method.

[html] view plain copy

<label>E-mail:<input></label>

The effect is the same as before.

Of course other form controls can also be associated with labels. For example, the following example:

[html] view plain copy
<label for="a">a:</label> <input type="radio" id="a"><br>  
[html] view plain copy
<pre name="code" class="html" style="font-size: 14px;"><label for="b">b:</label> <input type="radio" id="b"><br>  
[html] view plain copy
<label for="c">c:</label> <input type="radio" id="c">

Then you may say that this label label is not very useful even if you think about it.

Well, of course it works. In addition to enhancing user experience, it also provides convenience for people with reduced mobility to access the Internet. For example, visually impaired people use the sound of a "web page reader" to browse the web. Without the association of label tags, surfers cannot imagine the correspondence in their minds and cannot well understand what the website form means. the content of the expression. For another example, surfers with physical disabilities have difficulty controlling the mouse. After using label, the click target becomes larger, which is easier for operation.

So, a truly good page must be cross-browser and adaptable to devices with screens of various sizes. It should also be accessible to all types of Internet users (whether they are the elderly or those with disabilities). people) to provide convenience. There are only so many ways to use label tags in

html. Friends who need it can save it. Please also continue to pay attention to other updates of this site.

Related reading:

Naming rules in HTML

How to hide overflowing DIV borders Content

How to use CSS to modify the mouse style

The above is the detailed content of How to use label tag in html. For more information, please follow other related articles on the PHP Chinese website!