Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <label> tag.

Use of <label> tag

The <label> tag is used to define a label for an <input> element.
Adding this <tag> will no have visual effect on the relative elements.

Display:Inline

Example of <label> tag

    <form>
       <label for="male"> Male </label>
       <input name ="male" id="male">
    </form>

The value of the attribute for of the <label> tag should be equal to the id attribute of the related element to make them together.

Supported Browsers.

Tag
<label> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label for="male"> Male </label>
<input type="radio" id="male" value="male"> <br>
Female
<input type="radio" id="female" value="female">
</form>
</body>
</html>

Output


Female

You see that one is use <label> tag while the other does not use <label> tag.
The difference is in the mouse hover-effect on "male" and "female".

More Reference


The value of the attribute for of the <label> tag should be equal to the id attribute of the related element to make them together.

Default CSS Properties of <label> tag

label {
cursor:default;
}

Attributes of <label> tag


Attribute Value Notes
for element_id It specifies the ID of the related form field element.
form form_id It specifies one or more forms the label belongs to.

Note that: The form attribute is new in HTML5.