Using <label> and for Attribute

The <label> element connects text descriptions to form controls. Using the for attribute, you link the label directly to an input's id. This makes forms easier to use, especially for people using assistive technologies like screen readers. When you provide explicit labels, everyone benefits from improved usability, including users with disabilities who rely on clear associations between form fields and their descriptions.

Screen readers announce labels when users focus on inputs, helping visually impaired users understand the purpose of each field. Proper labeling also increases the clickable area—when you click a label, the corresponding input receives focus. This makes forms easier to use on mobile devices, where precise tapping can be difficult.

Avoid common pitfalls when labeling form controls. Always use unique id values for each input. The for attribute of a label must match the id of its associated input. Never rely solely on placeholder text to describe a field, as placeholders disappear when users start typing and are not always accessible to screen readers.