HTML label Tag

HTML <label> Tag: The HTML label tag is used to provide a usability improvement for mouse users i.e if a users clicks on the text within the <label> element, it toggles the control. The HTML<label>tag specifies label for a <button>, <output>, <meter>, <input> elements.

HTML <label> Tag

This HTML label tag supports both the global and the event attributes.

Syntax: <label>Text</label>

The <label> tag can be used in two ways:

  • Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a attribute whose value is same as input id.
  • Alternatively, <input> tag use directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.

Browser compatibility

The HTML<label>tag is supported by different types of browsers.

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Internet Explorer

Example:

<!DOCTYPE html>
<html>
<body>
<p>Select your state:</p>
<form action="/action_page.php">
  <label for="Andhra Pradesh">Andhra Pradesh</label>
  <input type="radio" name="state" id="Andhra Pradesh" value="Andhra Pradesh"><br>
  <label for="Telangana">Telangana</label>
  <input type="radio" name="state" id="Telangana" value="Telangana"><br>
  <label for="other">Other</label>
  <input type="radio" name="state" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output:

html label tag

Attributes supported by the <label> tag

Attribute Value Description
for element_id Specifies which form element a label is bound to