Labels are the unsung heroes of forms. A well-placed label tells the user what a field is for, but more than that, it makes the whole form easier to use — especially for people relying on screen readers or anyone on a phone trying to tap a tiny checkbox.
The Label Tag
<label> associates text with a specific input field. You connect them by setting the label's for attribute to the input's id. Now clicking the label focuses or activates the input.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Wrapping Input Inside Label
You can also nest the input directly inside the label tag. When you do that, the for and id attributes are optional — the association is implicit. Both approaches work, so pick whichever feels cleaner to you.
<label>
Email:
<input type="email" name="email">
</label>
Why Labels Matter for Accessibility
Screen readers announce the label text when the input is focused. Without a label, a visually impaired user might hear "edit text" with no clue what to type. That is a frustrating experience. Labels also increase the clickable area — tapping the label text focuses the input, which is a lifesaver on mobile for small radio buttons and checkboxes.
Labels with Checkboxes and Radios
Labels are especially important for checkboxes and radio buttons where the clickable target is tiny. Wrapping them in a label makes the whole text clickable, which is much more user-friendly.
<label>
<input type="checkbox" name="agree">
I agree to the terms and conditions
</label>