Note : The <LABEL> element is a new element introduced in HTML 4.0 draft specifications and is currently only supported by Internet Explorer 4.0.
The <LABEL> element is used to link a text label to control like elements. Typically, these would be form elements - buttons, radio buttons, checkboxes etc. It provides for the kind of functionality built-in to most standard Windows based applications, whereby clicking the label next to a radio button is the same as clicking the radio button itself. Previously, in HTML, the radio button itself would have had to be clicked.
For example, consider the two radio buttons below:
They are constructed using standard <INPUT TYPE="radio"... elements. Notice that to make a choice, you have to click the actual radio button itself. Clicking the label does not make the choice.
The same example, slightly modified, with <LABEL> elements added to the radio buttons:
Note that now clicking the text labels activates the radio buttons - the kind of behaviour seen in standard Windows based applications. Those radio buttons have had <LABEL> elements added to them, like so:
Make a choice:<BR>
<LABEL FOR="Red">Red : <INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="Red"></LABEL><BR>
<LABEL FOR="Blue">Blue : <INPUT TYPE="radio" NAME="Colour" VALUE="Blue" ID="Blue"></LABEL>
Note : If the <LABEL> element surrounds the control for which it is a label, then the focus marker (seen when the <LABEL> or control is clicked) will surround both elements. If the <LABEL> doesn't surround the control, then the focus marker will only be seen around the <LABEL> element.
The attributes for the <LABEL> element are:
ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <LABEL> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual label text and the label text is not modified in any way to reflect that an ACCESSKEY has been defined.
CLASS
The CLASS attribute is used to specify the <LABEL> element as using a particular style sheet class. See the Style Sheets topic for details.
DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <LABEL> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.
DATAFORMATAS
When the <LABEL> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <LABEL> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.
DATASRC
The DATASRC attribute can be used to specify a data source that the <LABEL> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.
FOR
The FOR attribute should directly reflect the ID attribute of the element which the <LABEL> is to be linked to. For example, in the above example, the two <LABEL> elements are linked to their respective radio buttons by their ID attributes. Note that the FOR attribute is theoretically unnecessary, if the <LABEL> element wraps the control it's a label for. Using the FOR attribute will ensure proper functionality though.
ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LABEL> element for scripting purposes. Any <LABEL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
LANG
The LANG attribute can be used to specify what language the <LABEL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.
LANGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LABEL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.
STYLE
As well as using previously defined style sheet settings, the <LABEL> element can have in-line stylings attached to it. See the Style Sheets topic for details.
TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <LABEL> section.
Every <LABEL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LABEL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <LABEL> element at all.
<LABEL...> Properties
The <LABEL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <LABEL> element supports the accessKey, dataFld, dataFormatAs, dataSrc and htmlFor, which directly reflect their attribute values.
<LABEL...> Methods
The <LABEL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
<LABEL...> Events
The <LABEL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Note : The onclick event for the <LABEL> element occurs before it is propagated to the element referenced in the <LABEL> elements FOR attribute (htmlFor property).