HTML <label> tag

The <label> tag is used to set the text of form elements. You should place this text between the beginning <label> tag and the ending </label> tag.

NOTE: This tag is not supported by Safari 2 and earlier versions of Safari.

Attributes

Attribute	Description	Possible values
for	Specifies which form element the text should be set for. The value of this attribute should be the same as the value of the id attribute that you're setting the text for	nameOfTheElement

Standard attributes

accesskey, class, dir, id, lang, style, title, xml:lang

For more information on standard attributes, check out our HTML standard attributes reference page.

Event attributes

onblur, onclick, ondblclick, onfocus, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For more information on event attributes, check out our HTML event attributes reference page.

Example

<form action="" method="post"> <label for="fname">First name: </label> <input type="text" name="fname" id="fname" /> <label for="lname">Last name: </label> <input type="text" name="lname" id="lname" /> <label for="email">Email: </label> <input type="text" name="email" id="email" /> <label for="pw1">Choose a password: </label> <input type="password" name="pw1" id="pw1" /> <label for="pw2">Enter password again: </label> <input type="password" name="pw2" id="pw2" /> Subscribe to our newsletter? <input type="radio" name="newsletter" id="Y" /><label for="Y">Yes</label> <input type="radio" name="newsletter" id="N" /><label for="N">No</label> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /> </form>

Output:

Tips & notes

Without the <label> tag, to access a form element you have to click on it. But when you use the <label> tag, you can actually just click on a form elements text to access it. In the example above try clicking on the text associated with each form element and notice how the elements will become accessible.

You can use the <label> tag to make form elements accessible to screen readers. A screen reader is a program that enables people with visual problems to access a computer. The screen reader will provide information to a visually impaired user through speech or braille. When you use the <label> tag, the screen reader knows which text is associated with which form element and will read each label with its proper form element accordingly.