HTML - <label> Tag

Quiz

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

The for attribute is a default attribute of the <label> tag, and is automatically added when creating the <label> tag. Multiple label elements can have the same value for their <for> attribute.

To explicitly associate a <label> element with an <input> element, first add an id attribute to the <input> element. Then, add the for attribute to the <label> tag, ensuring the value of the for attribute matches the id of the <input> element.

Syntax

Following is the syntax of <label> tag −

<label> ... </label>

Attributes

The HTML <label> tag supports Global and Event attributes of HTML. It also accept specific, which are listed bellow.

Attribute	Value	Description
form	form_id	Specifies one or more forms to which the label belongs.
for	element_id	Specifies the input control associated with this label. The value must match the "id" attribute of the input control.

Example: Creating <label> Element

In the following program, we use the <label> tag to create a label in HTML without any attributes. Running the code will generate an output displaying the label field on the webpage.

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

Example: Styling <label> Element

Here is another example of the HTML <label> tag. We are creating a table using the <label> tag and applying CSS for styling. Running the code will display the label field styled with CSS on the webpage.

<!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>

Example: Including <label> into Form

<!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

Print Page