Label
Labels are used to associate a label with a description.
<label> is required on every <input>, <textarea>, and <select> element for accessibility reasons. Without them, people who navigate the web with a screen reader will not know what a form field is or does.
Usage
A <label> requires a [for] attribute.
It’s value should match the ID of the element it’s associated with. IDs must be unique. Clicking or tapping the <label> will shift focus to the associated field.
<label for="season">What's your favorite season?</label>
<input type="text" id="season">Fields Inside Labels
If you’d prefer, you can place your fields inside a <label> instead of before or after it.
This is typically the preferred method for labeling checkboxes and radio buttons, but can be used for any type of input.
Kelp automatically styles both methods of using labels to look the same.
<label for="season">
What's your favorite season?
<input type="text" id="season">
</label>
<label for="pixar">
<input type="checkbox" id="pixar" name="awesome">
I love Pixar movies
</label>Implicit Labels
If a <label> is wrapped around a field, it is supposed to be associated with that field implicitly, without the need for a [for] attribute.
Unfortunately, in practice, this creates accessibility issues for some types of assistive technology. For example, some voice command software will refuse to navigate to the field.
If you choose to wrap your fields in a <label> (which is completely acceptable), be sure to use a [for] attribute anyways.
<!-- DO this -->
<label for="pixar">
<input type="checkbox" id="pixar" name="awesome">
I love Pixar movies
</label>
<!-- Do NOT do this -->
<label>
<input type="checkbox" name="awesome">
I love Pixar movies
</label>Kelp uses this approach for checkboxes and radio buttons, though you can use an explicitly associated <label> if you would prefer.
<label>
<input type="checkbox" name="awesome">
I love Pixar movies
</label>