Always give a form a label

An input field sitting there all alone, with no clue what to put in it — a lot of the trouble people have with forms comes from a missing label. <label> tells screen reader software “what this field is,” and on top of that it widens the clickable area — a tag everyone gains from.

Let’s try it out: a label widens the tap area

You can feel the effect best with a checkbox. Try clicking the text.

There are two ways to write it

Wrapping is the easiest.

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

When your design needs them placed apart, link them with for and id.

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

The key is to match the for value and the id value. Both ways have the same effect.

Give each group of questions a “name plate” too

For radio buttons and checkboxes, even if you put a <label> on each option, sometimes “which question these options belong to” doesn’t come across. Wrap the group of related questions in <fieldset>, and write the question text in <legend>.

<fieldset>
  <legend>What's your favorite snack?</legend>
  <label><input type="radio" name="snack" />Sunflower seeds</label>
  <label><input type="radio" name="snack" />Pinecone</label>
</fieldset>

Screen reader software reads the question and options as a set, like “What’s your favorite snack? Sunflower seeds, radio button.” It prevents the confusion of hearing only the options without knowing the question.

A placeholder can’t replace a label

You often see forms that get by with just a faint hint (placeholder).

<input type="text" placeholder="Name" />  <!-- ❌ can't replace a label -->

There are three reasons this is bad.

• It disappears once you start typing — “wait, what was this field for again?” happens
• The color is faint — to begin with, it doesn’t even meet the contrast passing line from two lessons back
• Depending on the screen reader, it may not be read out

Keep the placeholder to an input example like “e.g. Shima,” and always put the name plate in a <label>.

<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="e.g. Shima" />  <!-- ○ divide the roles -->

The name plate stays visible in the <label> at all times, and the input example goes in the placeholder — with this division of roles, you’re fine even when the hint disappears as you start typing.

Show “required” with words

“I made the required fields red, so people will know, right?” — this violates the don’t rely on color alone rule from the contrast lesson. Write that a field is required in words.

<label for="email">Email address (required)</label>
<input type="email" id="email" name="email" required />

Writing “(required)” in the label gets the same information to people who see it and people who hear it read aloud. Adding the required attribute makes the browser prompt them automatically if they try to submit while it’s empty, so add it as well.

Summary of this lesson

1. A <label> on every input field — it reaches screen readers, and widens the pressable area
2. There are two ways to write it: “wrap it” or “connect it with for and id”
3. A placeholder is an input example. Don’t use it as a label