<label>
A form field’s label. Clicking the label moves the cursor to the field.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content without other labels and without fields other than the one it describes
Example
#<p>
<label for="nick">Nickname on the leaderboard</label>
<input type="text" id="nick" name="nick">
</p>
<p>
<label>
<input type="checkbox" name="terms">
I accept the course terms
</label>
</p>Definition and usage
#The <label> element describes a form field: it says what you expect from the user ("Email", "Password", "I accept the terms"). You connect a label to a field in two ways: by wrapping the field with it, or by giving the field’s id in the for attribute.
This connection brings real benefits. A screen reader reads the label out when the user enters the field, and clicking the label text places the cursor in the field or checks the checkbox. On a phone, where it’s hard to hit a small checkbox, that’s a big difference.
You can connect a label to <input> elements (other than type="hidden"), <select>, <textarea>, <button>, <meter>, <output> and <progress>. One field can have several labels, but one label describes only one field.
Syntax
#<label for="field-id">Label text</label>Attributes
#id of a field
The id of the field the label describes. Thanks to it, the label and the field don’t have to sit next to each other in the code, which is handy, for example, when they’re in separate table cells.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#for
id of a fieldThe id of the field the label describes. Thanks to it, the label and the field don’t have to sit next to each other in the code, which is handy, for example, when they’re in separate table cells.
<label for="course">Choose a course</label>
<select id="course" name="course">
<option>HTML and CSS</option>
<option>JavaScript</option>
</select>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#placeholderdoesn’t replace a label. It disappears while typing, and it’s easy to forget what you were supposed to enter.- The value of
formust match the field’sidexactly, including letter case. - If the design calls for hiding the label, hide it only visually (for example with a
.sr-only-style class), instead of removing it. Screen readers will still read it.
Related entries
#- <input>A form field: text, email, password, number, date, slider, checkbox, file and many more.
- <form>A form that collects data from the user and sends it to a given address.
- <select>A dropdown list the user picks one or more options from.
- <textarea>A multi-line text field for longer input: messages, reviews, descriptions.
- <fieldset>A group of related form fields with a border and a `<legend>` caption.
Spotted a mistake or missing an example? Write to us.