HTML - <label> Tag

HTML <label> tag is used to represent a caption for an item in a UI(user interface), or to add labels to a form control like text, textarea, checkbox, radio button, etc.

The for attribute is a default attribute of the <label> tag, and it will automatically added while creating the <label> tag. Multiple label elements can be given the same value for their for attribute.

To explicitly associate an <label> element with an <input> element, you first need to add an id attribute to the <input> element. Next, you add the for attribute to the <label> tag, where the value of for attribute is the same as the id in the <input> element.

Syntax

<label> ... </label>

Attributes

HTML label tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed bellow.

Attribute	Value	Description
form	form_id	It specifies one or more forms the label belongs to.
for	element_id	Specifies the input control that this label is for. This value must be the same as the value in the input control's "id" attribute.

Examples of HTML label Tag

Bellow examples will illustrate the usage of label tag, where, when and how to use it to on a form.

Creating label Element

In the following program, we are using the <label> tag to create a label in an HTML that does not contain any attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Label tag</title>
</head>
<body>
   <label>Your name: </label>
</body>
</html>

Styling label Element

Following is another example of the HTML <label> tag. Here, we are creating a table using the <label> tag and, we are using the CSS to give style to it.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Label tag</title>
   <style>
      label {
         font-size: 20px;
         font-style: italic;
         color: green;
      }
   </style>
</head>
<body>
   <label for="name">Name: </label>
</body>
</html>

Including label into Form

In this program, we are creating a label for form fields using the <label> tag. We use the for attribute that value will be same as id of the form fields.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Label tag</title>
   <style>
      form {
         width: 250px;
         height: 180px;
         border: 1px solid green;
      }

      label {
         color: blueviolet;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <form>
      <label for="uname">Username: </label>
      <input type="text" id='uname'>
      <br>
      <label for="lang">Chose languages: </label>
      <br>
      <input type="checkbox" id='english'>
      <label for="english">English</label>
      <br>
      <input type="checkbox" id='hindi'>
      <label for="hindi">Hindi</label>
      <br>
      <label for="intro">Your short intro....</label>
      <br>
      <textarea id='intro'></textarea>
   </form>
</body>
</html>

Supported Browsers

Tag
label	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm