HTML <label> Tag
The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control. The <label> tag defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.
The <label> tag can be used in two ways:
- Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a for attribute whose value is the same as input id.
- Alternatively, <input> tag use directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.
Syntax:
<label> form content... </label>
Attribute Value:
- for: It refers to the input control that this label is for. Its value must be the same as the value of the input control’s “id” attribute.
- form: It refers to the form to which the label belongs to.
Example 1: Here we will use the input tag outside the label tag.
html
<!DOCTYPE html><html><body> <h1>GeeksforGeeks</h1> <strong>HTML label Tag</strong> <form> <!-- Starts label tags from here --> <label for="student"> Student </label> <input type="radio" name="Occupation" id="student" value="student"><br> <label for="business"> Business </label> <input type="radio" name="Occupation" id="business" value="business"><br> <label for="other"> Other </label> <!-- Ends label tags here --> <input type="radio" name="Occupation" id="other" value="other"> </form></body></html> |
Output:
Example 2: Here we will use the input tag inside the label tag.
html
<!DOCTYPE html><html> <body> <h1>GeeksforGeeks</h1> <strong>HTML label Tag </strong> <form> <!-- label tag starts from here --> <label> Male <input type="radio" name="gender" id="male" value="male" /> </label><br/> <label> Female <input type="radio" name="gender" id="female" value="female" /> </label><br/> <label> Other <input type="radio" name="gender" id="other" value="other" /> </label> <!-- label tag ends from here --> </form> </body></html> |
Output:
Supported Browsers:
- Google Chrome
- Edge 12
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...