HTML5 <label> Tag

The HTML <label> tag is used to represent a caption for an item in a user interface.

The only content permitted inside this element is Phrasing content, but no descendant <label> elements. Also, no labelable elements other than the labeled control are allowed. In other words, This element must not contain any nested label elements. It may only contain at most one descendant input element, button element, select element, or textarea element.

Both the starting and ending tag are mandatory for this element. The parent of the <label> tag can be any element that accepts phrasing content.

Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they’re associated.

The following style is applied to this element by default:

label {
  cursor: default; 
}

Here is an example of using this tag:

<label for="username">Enter Username</label> <input type="text" id="username">

Attributes

for

The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
A label element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

form (HTML5)

The form element with which the label is associated (its form owner). If specified, the value of the attribute is the ID of a <form> element in the same document. This lets you place label elements anywhere within a document, not just as descendants of their form elements.

This content attribute was removed from the HTML specification on April 28, 2016. However, scripts still have access to a read-only HTMLLabelElement.form attribute; it returns the form of which the label’s associated control is a member, or null if the label is not associated with a control or the control isn’t part of a form.

Examples

See the Pen HTML label Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <label> element on MDN.
  2. You can also read the HTML <label> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top