HTML <label> Tag

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

Attributes

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: