HTML <label> Tag
Use HTML <label> tag to deliver a usability improvement for mouse users. Try HTML <label> tag examples yourself! Learn with W3docs.
The <label> tag defines a text label for the <input> tag. Clicking the label focuses or activates the associated form element. It improves form usability, as it is not always convenient to precisely target small form controls with a cursor.
The <label> tag is also used to define keyboard shortcuts to focus the associated element.
An input can be associated with several labels. If you click or tap a <label> which is associated with a form control, the resulting click event will trigger for the associated control.
Associating a <label> with an <input> element has some advantages:
- The label text is both visually and programmatically associated with the text input.
- You can click on the associated label for focusing or activating the input, as well as on the input itself.
Syntax
The <label> tag comes in pairs. The content is written between the opening (<label>) and closing (</label>) tags.
There are two ways to associate a text label with the form control to which it belongs:
- Set the identifier (
id) inside the<input>element and specify its name as aforattribute for the<label>tag.
Example of the HTML <label> tag:
Example of HTML <label> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="lfname">First name:</label>
<input id="lfname" name="fname" type="text" />
</form>
</body>
</html>Result
- Insert the
<input>into the<label>element. Note: Nesting the input inside the label is generally preferred for accessibility and code simplicity.
Example of the HTML <label> tag with an <input> element inside:
An example of HTML <label> tag including HTML <input> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input id="User" name="Name" type="text" />
</label>
</form>
</body>
</html>Example of HTML <form> with a <label> tag used with radio type of an <input> tag:
Example of HTML <label> tag with radio type of HTML <input> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="barca">Barcelona</label>
<input type="radio" name="team" id="barca" value="Barcelona" />
<br />
<label for="real">Real Madrid</label>
<input type="radio" name="team" id="real" value="Real Madrid" />
<br />
</form>
</body>
</html>Example of the HTML <label> tag with CSS font properties:
Example of HTML <label> tag with CSS font properties
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 20px;
}
label {
font-size: 20px;
font-weight: 700;
color: #1c87c9;
}
input {
width: 50%;
height: 28px;
padding: 4px 10px;
border: 1px solid #666;
background: #cce6ff;
color: #1c87c9;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label>Your Name:</label>
<input id="User" name="Name" type="text"/>
</form>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
accesskey | accesskey | Defines a keyboard shortcut to focus the associated form element (does not navigate or jump to it). |
for | element\_id | Sets the ID of the element to which the label should be bound. |
form | form\_id | Specifies the form(s) with which the label will be associated. This attribute allows you to place tags in an arbitrary location in the document, and not just as a descendant of the <form> element. |
The <label> element also supports the Global Attributes and the Event Attributes.
Example of the form attribute:
<form id="myForm">
<input type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>How to style an HTML <label> tag
{
"tag_name": "label"
}Practice
What is the purpose of the HTML <label> tag?