Learn Using Labels for Better Form Accessibility

The <label> element is used to associate a label with an input field on a form. This association helps users understand the information being requested in the form field. When a user clicks on the label, it automatically focuses on the corresponding input field.

There are two ways to connect label and input elements:

Wrapping

You can nest an <input> inside a <label>, and the browser will link them automatically.

index.html

Clicking "Name" focuses the input field.

Using the id Attribute

If the input cannot be placed inside the label, connect them manually:

index.html

Here, the label uses for="name" and the input uses id="name". Matching values create the connection.

Note

Using these methods, you establish a visual and semantic connection between the label and the input field. However, there may be situations where wrapping the input element within the label is impossible due to styling constraints or website logic. In such cases, you commonly rely on attribute connections to maintain flexibility in applying styles and implementing background logic.

Let's examine the difference between the two approaches by examining the code in the image.

Note

From the browser's perspective, the chosen approach to establish the connection is inconsequential. Both methods achieve the same result of linking the label and input field together for improved usability and accessibility.