Forma saysA <label> names a control and, when linked, makes the text itself clickable — a core accessibility requirement.
Connect a label two ways: wrap the control (<label>Name <input></label>) or link by id (<label for="nm"> + <input id="nm">). Either way, clicking the label focuses or toggles the control — a bigger, friendlier hit target.
Labels are not optional polish: screen readers announce them so users know what each field is. Every input, select, and textarea should have one.
Power-ups you unlock
Wrap the control, or link via for="id" + id
Clicking the label focuses/toggles the control
Screen readers read the label with the field
Every form control deserves a label
Captain Invalid Input attacks — common mistakes
Using placeholder text instead of a real label
for/id mismatch → the link silently fails
A floating bit of text near an input that is not a <label>
Boss battleLabel one input by wrapping and another via for/id. Click each label and confirm the control focuses.
Example code
<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
<form action="#">
<p><label>wrapped <input name="a"></label></p>
<p><label for="b">linked</label> <input id="b" name="b"></p>
<p><label><input type="checkbox"> click my text to toggle</label></p>
</form>
</body></html>