This element is used to provide a label for a control element. If the user clicks the label, it will move the focus to the associated control, specified with the control attribute.
More information is available in the XUL tutorial.
-
Attributes
-
accesskey, control, crop, disabled, href, value
-
Properties
-
accessKey, accessibleType, control, crop, disabled, value
-
Style classes
-
header, indent, monospace, plain, small-margin, text-link
Examples
<label value="Email address" control="email"/>
<textbox id="email"/>
Attributes
accesskey- Type: character
- This should be set to a character that is used as a shortcut key. This should be one of the characters that appears in the
label attribute for the element.
control- Type: id
- This attribute specifies the
id of the element with which the label is associated. When the user clicks on the label, the associated element is given focus.
-
crop
-
Type: one of the values below
-
If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the
crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.
-
-
start
-
The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
-
end
-
The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.
-
left
-
The text will be cropped on its left side.
-
right
-
The text will be cropped on its right side.
-
center
-
The text will be cropped in the middle, showing both the start and end of the text normally.
-
none
-
The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.
-
Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value
none and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value none:
-
menupopup > menuitem, menupopup > menu { max-width: none; }
disabled- Type: boolean
- Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the
command event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case.
The disabled attribute is allowed only for form controls. Using it with an anchor tag (an <a> link) will have no effect.
The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.
- Visible controls have a
disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
href- Type: string
- Defines a URL to open when this element is clicked. Requires the class attribute to include text-link.
value- Type: string
- The text to be used for the label.
Properties
-
accessibleType
-
Type: integer
-
A value indicating the type of accessibility object for the element.
-
control
-
Type: element id
-
Gets and sets the value of the
control attribute.
-
crop
-
Type: string
-
Gets and sets the value of the
crop attribute.
-
value
-
Type: string
-
Gets and sets the value of the
value attribute. For textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the Textbox.value and Menulist.value syntax.
Methods
| Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData |
Style classes
The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
header- A class used for headings. Typically, this will cause the text to appear bold.
indent- This class causes the text to be indented on its left side.
monospace- This class causes the text to be displayed in a monospace font.
plain- This class causes the element to be displayed with no border or margin.
small-margin- This class causes the text to be displayed with a smaller margin.
text-link- Labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or Enter key press. Labels will appear like a link (blue and underlined).
-
Elements
-
description
-
Attributes
-
label
-
Interfaces
-
nsIAccessibleProvider, nsIDOMXULLabelElement
Notes
Labels are not focusable
Note: Starting in Gecko 2.0, labels are properly not focusable. They used to incorrectly inherit from nsIDOMXULControlElement.
The caption is in the "value" attribute
Remember that the label element has a "value" attribute, unlike value in HTML whereas buttons, checkboxes use label="foo" as the attribute
<label label="A Caption"/> <!-- wrong -->
<label value="A Caption"/>
<label value="Click the button"/>
<button label="A Button"/>
<checkbox label="A Decision" value="1"/>
Wrapping
By default, label text does not wrap. To enable wrapping, use a text node instead of the value attribute.
<label control="email">Email address</label>
<textbox id="email"/>
If the text node contains no tags, it can easily be accessed and manipulated from JavaScript using node.textContent.
