Label tag in html with examples

Home » HTML » HTML Tags » Label tag in html with examples

Label tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <label> tag is used for adding a label to a form control.
The <label> element does not render as anything special for the user. 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 of the <label> tag should be equal to the id attribute of the related element to bind them together.
The <label> tag is supported in all major browsers.

Example :

     <html>
     <head>
     <title>Label</title>
     </head>
     <body>
     <label for="t1">Name:</label>
     <input type="text" id="t1"><br/>
     <label for="t2">Age:</label>
     <input type="text" id="t2">
     </body>
     </html>

Demo :

In the above example, we have rendered label control. We have also rendered text box corresponding to the label. The for attribute of label is set using the id attribute of the textbox in front.

Label and Style :

<html>
<head>
<title>LabelStyle</title>
<style type="text/css">
label
{
font-size:30px;
font-weight:bold;
font-family:comic sans  ms;
color:green;
}
</style>
</head>
<body>
<label for="t1">Name:</label>
<input type="text" id="t1"><br/>
<label for="t2">Age:</label>
<input type="text" id="t2">
</body>
</html>

Demo :

In the above example, we have rendered label control. We have applied CSS to the label text.

Label and Javascript :

<html>
<head><title>LabelJavascript</title>
<style type="text/css">
label
{
font-size:30px;
font-weight:bold;
font-family:comic sans  ms;
color:green;
}
</style>
<script type="text/javascript">
function label()
{
var element=document.createElement("label");
var text=document.createTextNode("Name:");
element.appendChild(text);
document.getElementById("span1").appendChild(element);
}
</script>
</head>
<body>
<span id="span1"></span><input type="text" id="t1"><br/>
<input type="button" id="b1" value="Press" onclick="label()"/>
</body>
</html>

Demo :

In the above example, we have rendered a text box and a button. On click of this button using JavaScript we have created a label element and appended in front of text box.