Detailed analysis of the for attribute of the tag in html

This article introduces to you a detailed analysis of the for attribute of the tag in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the Create a Set of Radio Buttons section of the HTML tutorial on freecodecamp, I saw this paragraph,

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.

roughly means : The best way is to add the for attribute to the label label, whose value is the same as the id attribute of the input label. , to create an association between label and input.

At the same time, a sample code is given, as follows:

<!-- Code 1 -->
<label> 
  <input>Indoor 
</label>

In the code, the for attribute value of label and the id of input The attribute values ​​are the same. From this code, it is not clear where the connection is.

The definition of the for attribute of label is as follows:

Sample code:

<!-- Code 2 -->

Comparing the two pieces of code, it is not difficult to find,

1. label It is different from the inclusion relationship of input tags. The label and input of Code 1 belong to an inclusive relationship, while the label and input of Code 2 are relatively independent.

2. label and input are arranged differently on the page. It is not difficult to find through Chrome's developer tools that in the running results of Code 1, the label label covers the input label, and in the running results of Code 2, the label label is juxtaposed with the input label.

3. label corresponds to input one-to-one. Click on the label content, and the corresponding single-ended button will be selected.

If we delete the for attribute of label in the two pieces of code, the previous points 1 and 2 will remain unchanged, and the change will be point 3. For the operation results of Code 1, you can still select the radio button by clicking on the label content. Code 2 is different. Clicking on the content of the label cannot select the radio button.

After a simple comparison of the code running results, we can verify that the passage quoted at the beginning of the article is correct. Adding the for attribute to the label can improve code quality.

Recommended related articles:

How to solve the problem of tag nesting in html

The default behavior of the parent element tag And the interaction between click events

The above is the detailed content of Detailed analysis of the for attribute of the tag in html. For more information, please follow other related articles on the PHP Chinese website!