Inputs and Labels: A Real Way to Reach You

Contact only offers a link to somewhere else. This lesson adds real fields a visitor can type into, correctly bound to the words that name them.

The concept

Here is your page as it stands. Run it:

Here is a text field with a word sitting next to it. Run it, then click directly on the word "Name":

Nothing happens. The word and the field look related, but nothing in the HTML actually connects them. Now the same field, done properly. Run it, and click "Name" again:

This time, clicking the word moves focus straight into the field. That is not a coincidence of layout. It is for="name" on the label, matching id="name" on the input, exactly. Two elements, bound together by one matching string, the same pattern href="#id" used earlier with in-page links.

The syntax

<label for="name">Name</label>
<input type="text" id="name" />

<input> is a void element, like <img>: one tag, no closing partner, everything carried in its attributes. type sets what kind of value it expects. type="text" is a plain field. type="email" is the same field, but it hints to the browser, and often the device's keyboard, that an email address belongs there.

<label> is not decoration. Its for attribute must exactly match the input's id. Get that match right, and the label becomes part of the input's clickable target. A screen reader announces the label's text the moment that field receives focus.

A minimal working example

<label for="name">Name</label>
<input type="text" id="name" />
 
<label for="email">Email</label>
<input type="email" id="email" />

Two fields, two labels, four attributes total, and every one of them is doing real work.

Common mistakes

A label with no matching input. You write <label>Name</label> with no for, next to an <input> with no id. They sit beside each other and look connected. Clicking the label text does nothing, because nothing in the HTML actually ties them together.

A for and id that almost match. You write for="Name" and id="name", different only in capitalization. The match has to be exact, character for character, so the binding silently fails. If clicking a label does not focus its field, compare the two values letter by letter.

The wrong type for the data. You use type="text" for an email field out of habit. The page still works, and the value still saves. The browser has no way to offer its email keyboard on a phone, though, since nothing told it what kind of value this field expects. Choosing the type that matches the data is a small habit with a real payoff.

Try it yourself

Contact still only offers a link. Give it real fields. After each Run, scroll the preview to Contact if you do not see it yet. The header and About sit above it, so the fields can land below the fold.

1. Run the starting code below. Scroll the preview to Contact if you do not see it yet. Confirm Contact still has nothing to type into.
2. Inside the Contact section, add a label and input pair for a name: <label for="name">Name</label> followed by <input type="text" id="name" />.
3. Add a second pair for email: <label for="email">Email</label> followed by <input type="email" id="email" />.
4. Run it. Scroll to Contact. Click each label's text and confirm focus jumps into its matching field.
5. Break it on purpose: delete the for="name" attribute from the Name label, keeping the input's id in place. Run it, scroll to Contact, click "Name" again, and confirm focus no longer moves. Put the attribute back.

Contact can now take real input, correctly bound and ready for a screen reader to announce. Typing into these fields does not do anything yet. The next lesson wraps them in a real form, and gives that word, submission, its actual meaning.