HTML <label> Tag
The HTML <label> tag represents a caption to a user interface control (usually a form control, however, it could be any phrasing content).
The <label> element allows you to attach a caption/label to a control so that the user knows what the control is for. For example, an input field that accepts the user's first name might have a label of "First Name: ".
Some browsers enable users to select a radio button or checkbox option by clicking on its <label> element.
Syntax
The <label> tag is written as <label></label> with the label text inserted between the start and end tags.
You can use the <label> tag in one of two ways. You can enclose the associated control within the <label> element's opening and closing tags. Or you can reference the associated element by it's ID using the for attribute.
Like this:
Or this:
Examples
Basic tag usage
In this example, the <label> tag surrounds a radio button form control (<input> element).
The for Attribute
This example has the same result as the above example. The difference is that, in this example, the <label> element doesn't enclose the form control (the form control is not nested inside the <label> tag, like in the above example). Instead, it uses the for attribute to associate the <label> tag with a control.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
The <label> element accepts the following attributes.
| Attribute | Description |
|---|---|
for | Specifies the input control that this label is for. This value must be the same as the value in the input control's "id" attribute. |
form | Specifies the ID of a form to which this control belongs.
Possible values: [The ID of a form element in the element's owner |
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <label> tag , as well as with all other HTML tags.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
For more detail, see HTML event handler content attributes.