# Text Inputs and Labels

A text input is a one-line box with a name for the data it sends, and a label tied to it by for and id tells everyone, screen readers included, what the box is for.

Apprentice · HTML · Web Development · Updated October 31, 2026

## 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: \`&lt;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.

```html
<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:

```html
<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:

```html
<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:

```html
<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`.

```html
<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

- [&lt;input>](https://www.ask-codey.com/glossary/input-html)
- [Text input](https://www.ask-codey.com/glossary/text-input)
- [&lt;label>](https://www.ask-codey.com/glossary/label)
- [for attribute](https://www.ask-codey.com/glossary/for-attribute)
- [Form control name](https://www.ask-codey.com/glossary/form-control-name)
- [placeholder](https://www.ask-codey.com/glossary/placeholder)

## Cheat sheets

- [Text Inputs and Labels](https://www.ask-codey.com/cheat-sheets/html-forms-text-inputs-and-labels-cheat-sheet)

## Related

- [How a Form Sends Data](https://www.ask-codey.com/lessons/html-forms-how-a-form-sends-data)
- [Buttons](https://www.ask-codey.com/lessons/html-forms-buttons)

Source: https://www.ask-codey.com/lessons/html-forms-text-inputs-and-labels