<label>: The HTML Label Element

1 Description

The HTML <label> is used to provide a descriptive name for a single <input> element.

There are two different ways to associate a <label> element with a <input> element. The two methods are listed below.

  1. Give the <label> an attribute called "for", AND give the <input> element an attribute called "id", and make the value in each of these attributes match.
  2. Make the <input> element a child of the <label> element. In this circumstance both the "for" attribute and the "id" attribute are unnecessary.

2 Examples

<!DOCTYPE html>
<html>
    <head>
        <title>Label Example</title>
    </head>
    <body>
        <form>
            <!-- label element is linked to the input element via the use of the 'for' and 'id' attributes -->
            <label for="username">Username</label>
            <input id="username" type="text" placeholder="Username" required/>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Label Example Page</title>
    </head>
    <body>
        <form>
            <!-- Nesting the input element inside of the label element associates the two of them -->
            <label>Username <input name="username" placeholder="Username" required/></label>
        </form>
    </body>
</html>

This document was last updated: