html tutorial - Label <label> tag in HTML - html5 - html code - html form

Learn html - html tutorial - label tag in html - html examples - html programs
- The <label> tag is used to create a caption for the Input element.
- When the user clicks on the text within <label> tag that toggles the specified control.
- The <label>tag supports the Global Attributes and Event Attribute.
- The <label> tag belongs to Flow content, phrasing content, interactive content, form-associated element, palpable content Categories.
Syntax for <label> tag:
<label>content</label>
Differences between HTML 4.01 and HTML5 for <label> tag
HTML 4.01
- In HTML4 does not support “form” attribute.
HTML5
- The “form” attribute is new in HTML5.
Sample Coding for <label> tag:
Tryit<!DOCTYPE html>
<html >
<head>
<title>Wikitechy label tag</title>
</head>
<body>
<h2>Wikitechy Tutorials</h2>
<form>
<input type="radio" name="tutorial" id="php">
<label for="php">Wikitechy PHP<label><br>
<input type="radio" name="tutorial" id="html">
<label for="html">Wikitechy HTML <label><br>
<input type="radio" name="tutorial" id="css">
<label for="css">Wikitechy CSS </label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Code Explanation for <label> tag:

- The id=”php” used to declare the id for the <input> tag.
- <label> tag used to define a caption.
- for attribute is used to map the label caption to the <input> which has the id as “php”.
Output of <label> tag:

- The output displays list of “Wikitechy Tutorials” radio button along with its label caption.
- When user clicks the “Wikitechy HTML” label that toggle the radio button.

Attribute for <label>tag:
Attribute | Value | HTML4 | HTML5 | Description |
---|---|---|---|---|
for | element_id | Yes | Yes | It specifies which form element a label is bound to |
form | form_id | No | Yes | It specifies one or more forms the label belongs to |
Browser Support for <label> tag in HTML:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes |
Tips and Notes:
- A label element can have both a “for” attribute and a contained control element, the for attribute points to the contained control element.