Labelled input

Learn how to pair <label> and <input> elements.

Pairing label and field

A form field usually has two parts: a label (<label>) and an input field (<input>). The label says what the field wants; the input is where the user types.

To bind them, you set the label's for attribute and the input's id attribute to the same value. Example: <label for="email">Email</label><input id="email">. Now clicking the label also focuses the field.

Matching id and for

The id attribute gives an element a unique name within the page. In a form, each <input> should have its own id. The <label>'s for attribute carries the same name.

Example: <label for="name">Your name</label> and <input id="name" name="name">. Here for and id share the value name; the two bind. name is the key sent to the server.

Exercise Write a labelled input

Add a <label> and an <input> to the form. The label text should be Your name. Set both for and id to name.

Show example solution

<form>
  <label for="name">Your name</label>
  <input id="name" name="name">
</form>

Test yourself

Which attribute binds a <label> to an <input>?
- for
- name
- value
- type
Show answer

for — Correct. The label's for attribute matches the input's id.

Write the label's opening

<____ for="email">Email</label>
<input id="email">

Show answer

<label for="email">Email</label>
<input id="email">

Match each tag to its role

for

Binds label to input
id

Input's unique name
<label>

Field label
<input>

Single-line field

Next lesson: Input types

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies