Text Inputs and Labels

After this lesson you can

• Write a text input with a name and a label tied to it by for and id
• Explain why a placeholder is not a label

Key takeaways

• An <input type="text"> makes a one-line text box. It's a void element, with no closing tag.
• Give every box a name, so its answer is sent, and an id, so a label can point to it.
• A label's for attribute matches the box's id, not its name. Or put the box inside the label, and no for is needed.
• A label lets people click its words to reach the box, and it's the name a screen reader reads aloud.
• A placeholder disappears as soon as you type and is hard to read, so it can add an example but never replaces a label.

Picture a form with four empty boxes and some gray hints inside them. You start typing in the third box, the hint vanishes, and now you can't remember whether it wanted the song or the artist. For someone using a screen reader (software that reads the page aloud for people who can't see it), a box with no label at all is worse: it's announced as "edit text", with nothing to say what to type. Labels fix both problems, and they're often the first thing a teacher, a client or an accessibility check looks for in a form you build.

The text box: `<input type="text">`

The blank line on a paper slip, on a web page, is an <input> element. With type="text", it's a text input: a box for one line of text, such as a name or a song title.

<input type="text" name="song">

• <input> is a void element: it has no closing tag and nothing goes inside it. Everything about it is in its attributes.
• type="text" makes it a one-line text box. Text is the default, so an <input> with no type is a text box too, but writing it says what you meant. The next chapter, Choosing the Right Input, covers the other types, such as email and dates.
• name is the box's name for the computer: the name in the name=value pair the form sends (How a Form Sends Data). Any box a visitor fills in, of any type, is called a form control, so this is the form control's name. A box with no name isn't sent.

A label: the words that belong to a box

The printed words beside a blank are the box's label, and HTML has an element for them: <label>. To tie a label to its box, give the box an id, and give the label a for attribute with the same value:

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

Read the first line aloud as "the label is for the input whose id is song". The for attribute matches the box's id, never its name. Here both are song, which is the usual habit, so there's only one word to keep straight, but they do different jobs: the id is how the page finds the box, and the name is how the data is labeled when it's sent. An id must be unique on the page.

When for and id don't match, nothing warns you. The page looks the same, but the label belongs to no box.

What a label does for everyone

A tied label does three jobs at once:

• Clicking the words reaches the box. Click "Song" and the cursor jumps into the song box. On a phone, that's a much bigger target for a thumb.
• A screen reader says the label. Instead of "edit text", it says "Song, edit text", so a listener who can't see the page knows what to type.
• The form explains itself to the next person who edits the HTML.

Try it. Make a page with a label and a box tied by for and id, open it with Live Server, and click the label's words: the cursor lands in the box. Now change the for to a word that isn't the box's id and click again. Nothing happens. In Chrome's developer tools, select the box in the Elements panel and open the Accessibility tab: its Name is the label's words, or empty when nothing is tied to it.

Wrapping the box in its label

There's a second way to tie them: put the box inside the <label> element. A label wraps its own box, so it needs no for, and the box needs no id for it:

<label>
  Artist
  <input type="text" name="artist">
</label>

Both ways work the same for clicking and for screen readers. Use for and id when the label and the box sit in different places, such as two columns of a layout, and wrapping when you'd like less to type. This course's exercise forms use for and id, with each label on the line above its box.

A placeholder is not a label

The gray text inside an empty box is a placeholder, set with the placeholder attribute:

<label for="artist">Artist</label>
<input type="text" id="artist" name="artist" placeholder="For example: The Beatles">

It's tempting to use a placeholder instead of a label, since it saves space. Here's why that goes wrong:

• It disappears as soon as you type. Halfway through a form, nobody can check what a filled-in box was for.
• It's hard to read. Browsers show it in light gray, which many people can't make out, especially on a phone in sunlight.
• It looks like an answer. Some people think the box is already filled in and skip it.
• It isn't sent. A box that shows only its placeholder sends an empty value, such as artist=.

A placeholder can add a short example of what to type, beside a real label, as above. It never replaces the label.

A starting value, and the size of the box

The value attribute puts text in the box when the page loads, and that text is sent unless the visitor changes it. A real run of a box with value="101.5" sent station=101.5.

<label for="station">Station</label>
<input type="text" id="station" name="station" value="101.5">

How wide the box is on the screen is a matter of looks, so it belongs in CSS. The exercise code's ready-made stylesheet makes every box as wide as the form. (HTML has an old size attribute that sets a width in characters, but CSS is the usual way today.)

Check yourself

2 questions to try on the lesson page.

So what

A box with a name sends its answer, and a box with a label tells every visitor what that answer should be. Those two attributes, on every field, are most of what makes a form usable.

Key terms

• <input>
• Text input
• <label>
• for attribute
• Form control name
• placeholder

Cheat sheets

• Text Inputs and Labels

Related

• How a Form Sends Data
• Buttons