HTML <label> Tag
Example
Three radio buttons with labels:
<form action="/action_page.html">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Definition and Usage
The <label> tag defines a label for several elements:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
Proper use of labels with the elements above will benefit:
- Screen reader users (will read out loud the label, when the user is focused on the element)
- Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the
<label>element, it toggles the input (this increases the hit area).
Tips and Notes
Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Global Attributes
The <label> tag also supports the Global Attributes in HTML.
Event Attributes
The <label> tag also supports the Event Attributes in HTML.
Related Pages
HTML DOM reference: Label Object
Default CSS Settings
Most browsers will display the <label> element with the following default values:
