Input Label

In the previous exercise, we created a text input. But the user doesn't know what to type into it, because nothing describes it.

To describe inputs, we use the label element. Unlike input, it has an opening and a closing tag, and its content is the text of the label.

To connect the label to its input, we give the input an id attribute with a unique value that identifies it. Then we add the for attribute to the label, with the same value as the input's id.

<form action="/processing.html" method="POST">
	<label for="input-nickname">Nickname</label>
	<input type="text" name="nickname" id="input-nickname">
</form>

This code is displayed like this:

Connecting the label to the input has two advantages:

• Clicking the label puts the cursor into the input. Try clicking the word Nickname above.
• Screen readers, which read web pages aloud to blind and visually impaired people, read the label when the user gets to the input, so the user knows what to fill in.