Example
Three radio buttons with labels:
<form action=”/action_page.php”>
<label for=”male”>Male</label>
<input type=”radio” name=”gender” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”gender” id=”female” value=”female”><br>
<label for=”other”>Other</label>
<input type=”radio” name=”gender” id=”other” value=”other”><br><br>
<input type=”submit” value=”Submit”>
</form>
Definition and Usage
The <label> tag defines a label for an <input> element.
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.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Tips and Notes
Tip: A label can be bound to an element either by using the “for” attribute, or by placing the element inside the <label> element.
Differences Between HTML 4.01 and HTML5
The “form” attribute is new in HTML5.
Attributes
= New in HTML5.
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies which form element a label is bound to |
| form | form_id | Specifies one or more forms the label belongs to |
Related Pages
HTML DOM reference: Label Object
HTML <label> for Attribute
Example
Three radio buttons with labels:
<form action=”/action_page.php”>
<label for=”male”>Male</label>
<input type=”radio” name=”gender” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”gender” id=”female” value=”female”><br>
<label for=”other”>Other</label>
<input type=”radio” name=”gender” id=”other” value=”other”><br><br>
<input type=”submit” value=”Submit”>
</form>
Definition and Usage
The for attribute specifies which form element a label is bound to.
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| for | Yes | Yes | Yes | Yes | Yes |
Differences Between HTML 4.01 and HTML5
NONE.
Syntax
<label for=”element_id“>
Attribute Values
| Value | Description |
|---|---|
| element_id | The id of the element the label is bound to |
HTML <label> form Attribute
Example
A <label> element located outside a form (but still a part of the form):
<form action=”/action_page.php” id=”form1″>
<input type=”radio” name=”gender” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”gender” id=”female” value=”female”><br>
<label for=”other”>Other</label>
<input type=”radio” name=”gender” id=”other” value=”other”><br><br>
<input type=”submit” value=”Submit”>
</form><label for=”male” form=”form1″>Male</label>
Definition and Usage
The form attribute specifies one or more forms the <label> element belongs to.
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| form | Yes | Yes | Yes | Yes | Yes |
Differences Between HTML 4.01 and HTML5
The form attribute is new in HTML5.
Syntax
<label form=”form_id“>
Attribute Values
| Value | Description |
|---|---|
| form_id | Specifies the form element the <label> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document. |