label
Definition
The label
element associates a label with form controls such as input
, textarea
, select
and object
. This association enhances the usability of forms. For example, when users of visual Web browsers click in a label, focus is automatically set in the associated form control. For users of assistive technology, establishing associations between labels and controls helps clarify the spatial relationships found in forms and makes them easier to navigate.
Example
The label
element is associated with a form control using the for
attribute. The for
attribute contains the same value as the value of the id
attribute of the associated form control. For example:
<form method="post" action="register.php">
<p>
<label for="firstname">First name</label><br />
<input type="text" name="firstname" id="firstname" /><br />
<label for="lastname">Last name</label><br />
<input type="text" name="lastname" id="lastname" />
</p>
</form>
The association between a label and a form control can also be made implicitly, if the label
element contains both the label text and the form control. For example:
<form method="post" action="register.php">
<p>
<label>First name<br />
<input type="text" name="firstname" /></label><br />
<label>Last name<br />
<input type="text" name="lastname" /></label>
</p>
</form>
Attributes
Basic
for
- (IDReference) This attribute explicitly associates the label with a form control. When present, the value of this attribute must be the same as the value of the
id
attribute of the form control in the same document. When absent, the label being defined is associated with the control inside the label
element.
Advanced
accesskey
- (Character) Accessibility key character.
onblur
- (Script) A client-side script event that occurs when an element loses focus either by the pointing device or by tabbing navigation.
onfocus
- (Script) A client-side script event that occurs when an element receives focus either by the pointing device or by tabbing navigation.
Common core attributes
class
- (NameTokens) This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or set of class names. Multiple class names must be separated by white space characters. Class names are typically used to apply CSS formatting rules to an element.
id
- (ID) This attribute assigns an ID to an element. This ID must be unique in a document. This ID can be used by client-side scripts (such as JavaScript) to select elements, apply CSS formatting rules, or to build relationships between elements.
title
- (Text) This attribute offers advisory information. Some Web browsers will display this information as tooltips. Assistive technologies may make this information available to users as additional information about the element.
Common internationalization attributes
xml:lang
- (NameToken) This attribute specifies the base language of an element's attribute values and text content.
dir
This attribute specifies the base direction of text. Possible values:
ltr
: Left-to-rightrtl
: Right-to-left
Common event attributes
onclick
- (Script) A client-side script event that occurs when a pointing device button is clicked over an element.
ondblclick
- (Script) A client-side script event that occurs when a pointing device button is double-clicked over an element.
onmousedown
- (Script) A client-side script event that occurs when a pointing device button is pressed down over an element.
onmouseup
- (Script) A client-side script event that occurs when a pointing device button is released over an element.
onmouseover
- (Script) A client-side script event that occurs when a pointing device is moved onto an element.
onmousemove
- (Script) A client-side script event that occurs when a pointing device is moved within an element.
onmouseout
- (Script) A client-side script event that occurs when a pointing device is moved away from an element.
onkeypress
- (Script) A client-side script event that occurs when a key is pressed down over an element then released.
onkeydown
- (Script) A client-side script event that occurs when a key is pressed down over an element.
onkeyup
- (Script) A client-side script event that occurs when a key is released over an element.
Common style attribute
style
- (Text) This attribute specifies formatting style information for the current element. The content of this attribute is called inline CSS. The
style
attribute is deprecated (considered outdated), because it fuses together content and formatting.
Contains