<label> element is used to associate a label with an input field on a form. The purpose of this association is to make it easier for users to understand what information is being requested in the form field. When a user clicks on the label, it will focus on the corresponding input field.
Ways to connect label and input elements
By nesting a form element, such as an
<input/> field, within a
<label> element, the browser automatically creates a link between the
label and the
input field. Clicking on the label text, such as "Name" or "Phone", will automatically focus on the corresponding input field.
When a form element is not nested within a
<label> element, it is necessary to manually link them using the
id attribute of the form element and the
for attribute of the label.