<label> Tag
Associate text with form controls for clicks and screen readers.
1Always Use Labels
Either wrap the input in <label> or link them with for and id. Clicking the label focuses the input — critical for accessibility and tap targets.
<!-- Wrapping -->
<label>
Email
<input type="email" name="email" />
</label>
<!-- Linking -->
<label for="user">Username</label>
<input id="user" name="user" type="text" />2Put the element in context
A label gives a field a persistent description and can expand the useful click area. An explicit label uses for to match an input’s unique ID. A placeholder may show an example, but it disappears during typing and should not be the only field name.
3Practice with a small page
Create a labeled email field with an example placeholder. Click the label and check that focus moves to the field. Type a value and observe that the visible label remains. Add a separate hint when the requested format needs explanation.
Finished reading?
Mark this topic as complete to track progress.