Log in from a computer to take this course

You'll need to log in from a computer to start Learn HTML. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store

In the previous exercise we created an <input> element but we didn’t include anything to explain what the <input> is used for. For a user to properly identify an <input> we use the appropriately named <label> element.

The <label> element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a <label> and an <input>, the <input> needs an id attribute. We then assign the for attribute of the <label> element with the value of the id attribute of <input>, like so:

<form action="/example.html" method="POST"> <label for="meal">What do you want to eat?</label> <br> <input type="text" name="food" id="meal"> </form>

The code above renders:

rendered form with labeled text field

Look, now users know what the <input> element is for! Another benefit for using the <label> element is when this element is clicked, the corresponding <input> is highlighted/selected.

Let’s see the <label> element in action!



Add a <label> element that is associated with the included <input> element in index.html. (use the for attribute!)

Then add text Username within the <label> element.

After clearing this checkpoint, click on the Username label in the web browser to see the corresponding <input> field selected.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?