description & Usage
The <label> tag is used to label <input> elements.
This tag is associated with an <input> element using the for attribute.
The value of the for attribute must match the id attribute of the <input> element. Take a look at the code below:
<label for="name">
<input type="text" id="name">- <input type="text"> (Assumption)
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="time">
- <input type="url">
- <input type="week">
Notes
Note: Clicking on a <label> label will also click its associated <input>.
Browser compatibility and Support
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <label> |
Attributes
| Attributes | Values | Description |
|---|---|---|
| for |
element-id
|
en |
| form |
form-id
|
en |
Global Attributes
The <label> tag supports the HTML Global Attributes.
Event Attributes
The <label> tag supports the HTML Event Attributes.
Default CSS
Most browsers will display the <label> tag with the following default style:
