For attributes of HTML label labels

Background:

The Code is as follows:

 <P>
<Label for = "code"> employee ID (*): </label>
<Input id = "code" name = "code" type = "text"/>
</P>

What is the relationship between the for in the label and the ID in the input? I also got stuck. It seems that the Foundation is not good... so I went to Google.

Introduction:

The label Label defines the annotation (TAG) for the input element, which improves the usability for the mouse user. If you click Text in the label element, this control is triggered. That is to say, when the user selects the tag, the browser automatically redirects the focus to the form control related to the tag.

The for Attribute of the label should be the same as the ID attribute of the relevant element.

Test code:

Code

 <Div>
<Label for = "code"> Test 1 </label>
<Input id = "code"/>
</Div>
<Div>
<Label> Test 2 </label>
<Input id = "text1"/>
</Div>
<Div>
<Label for = "Nan"> male </label>
<Input type = "checkbox" id = "Nan"/>
<Label for = "NV"> female </label>
<Input type = "checkbox" id = "NV"/>
</Div>

:

　　

Result:

When you click the text, the associated selection box and input box are selected.