The <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

Wrapping

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.

id attribute

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.