This website may use cookies. More info. That's Fine x
Welcome Login

Html: label tag (and 'for' attribute)


label tag defines a label for an input element.

label element does not render as anything, however, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.

The 'for' attribute specifies one or more forms the label belongs to.  The 'for' attribute of the label tag should be equal to the id attribute of the related element to bind them together.

 

Most browsers will display the label element with following default values:

label {
    cursor: default;
}

 

 

 

Displaying text for a checkbox:

You can use a label tag with a 'for' attribute to display text for a checkbox.

The 'for' attribute specifies which form element the label is bound to.

<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>

 

Eg: display text for checkboxes:

<input id="cbBlacklist" type="checkbox" />
<label for="cbBlacklist">Blacklist</label> 
<input id="cbWhitelist" type="checkbox" />
<label for="cbWhitelist">Whitelist</label>

 

Outputs:

html-checkbox1


Created on: Friday, February 24, 2017 by Andrew Sin