Labels are great for describing what a input
is for. Learn how and why to use labels.
What are labels
The label
element represents a description for an input
element.
<label for="email">Email</label>
<input id="email" type="email" />
Why labels are useful
Associating a <label>
with an <input>
element is useful because:
-
The label
text is visually and programmatically associated with its corresponding input
. ‘Programmatically’ means that a screen reader will read out the label
when the user is focused on the input
, making it clearer for them to know what data should be entered.
-
You can click a label
and its associated input
will be focused. This makes it easier for anyone trying to click a input
, especially those using a phone.
To associate a <label>
with an <input>
element, you need to give the <input>
an id
attribute. The <label>
then needs a for
attribute whose value is the same as the input’s id
.
<label for="email">Email</label>
<input id="email" type="email" />
Alternatively, you can add the <input>
directly inside the <label>
, in which case the for
and id
attributes are not needed because the association is implicit:
<label>
Email
<input type="email" />
</label>
Conclusion
Labels are great for giving the user more information, visually, and programmatically, about what data should be entered in an input
.