HTML <label> Tag
HTML
The <label> tag defines a label for an item in the user interface.
HTML <label> Tag
➔ The <label> element represents a caption for an input in a user interface.
➔ If a user clicks on the text in the <label> element, it toggles or focuses the corresponding input control.
➔ The <label> element can use the input control id using for attribute or encircle the input control directly.
Example
<input type="radio" id="html" name="runningsubject" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="runningsubject" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="js" name="runningsubject" value="JavaScript">
<label for="js">JavaScript</label><br>
Click on the "Try it Now" button to see how it works.
Note: Use the <label> tag to define labels for input types. The value of the 'for' attribute of the label element must be the same as the value of the corresponding input id.
Benefits of Label Tags:
➔ Screen readers and assistive technology can read labels for related input items.
➔ When a user focuses on an input field, screen readers and assistive technologies get the context of the input from the label text.
➔ On the other hand, if a user clicks on a label text, the corresponding input elements respond in such a way that:
- The input text field is focused,
- The checkbox changes its state,
- The radio button is selected.
➔ This is very useful for small devices because using labels expands the clickable area of the device.
➔ Sometimes inputs like radios or check boxes are very difficult to click or touch, especially for small devices, in that case labels are the right solution to extend the clickable area.
➔ It is mandatory for visually impaired users to use labels for all inputs so that the user can understand what the input element is being used for.
Best use and good practice.
Labels can be associated with input controls on a form in two ways.
➔ Non-warping method: This way a label tag does not wrap around an input element, but rather they are side by side for visual alignment. The label tag uses the 'for' attribute to create a relationship with the ID of the corresponding input control. Therefore, the value of the 'for' attribute and the value of the 'id' attribute must match to create a valid relationship.
Non-warping method syntax
<label for="name">Student Name:</label>
<input type="text" id="name" name="studentname">
➔ Warping method: In this method a label tag is wrapped around an input element so that there is a relationship between the label and the input control to expand the clickable area of the input. Therefore, the 'for' attribute and the 'id' attribute are not mandatory in this case. However, the 'for' attribute and the 'id' attribute are still useful for visually impaired users and assistive technology.
Warping method syntax
<label for="name">Student Name:
<input type="text" id="name" name="studentname">
</label>
Element Attributes
| Attribute | Value | Description |
|---|---|---|
for |
control_id | This specifies the ID of the element that the label will refer to. |
form |
form_id | This specifies which form the label belongs to. |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.