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



  • 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:

code explanation for label tag

  1. The id=”php” used to declare the id for the <input> tag.
  2. <label> tag used to define a caption.
  3. for attribute is used to map the label caption to the <input> which has the id as “php”.

Output of <label> tag:

output for label tag

  1. The output displays list of “Wikitechy Tutorials” radio button along with its label caption.
  2. output for label tag toggles radio button
  3. 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.

Related Searches to label tag in html