HTML - <label> Tag

The 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

Following is the syntax for HTML <label> tag −

<label>.......</label>

Specific Attributes

The HTML <button> tag also supports the following additional attributes −

S.No. Attribute & Description
1

form

It specifies one or more forms the label belongs to.
2 forSpecifies the input control that this label is for. This value must be the same as the value in the input control's "id" attribute.

Example

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>

When we run the above code, it will generate an output consisting of the label field on the webpage.

Example

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>

On running the above code, the output window will pop up displaying the label field applied with CSS on the webpage.

Example

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>

When we run the above code, it will generate an output consisting of the label field inside the form tag displayed on the webpage.

html_tags_reference.htm
Advertisements