HTML Labels and Placeholders

Forms are only helpful when users know how to fill them. That’s where labels and placeholders come in. Labels are like signposts. Placeholders are like whispers. Together, they guide users through form fields with clarity and confidence.

The <label> tag associates descriptive text with a form element. This improves accessibility and usability — especially for screen readers and larger forms.

<label for="fruit">Favorite Fruit:</label>
<input type="text" id="fruit" name="fruit">

Favorite Fruit: [___________]

The for attribute in the label must match the id of the input. This connection allows users to click the label and automatically focus the input — a small detail that improves experience significantly.

Without this pairing, labels and inputs may visually line up, but they’re not programmatically linked. That can break accessibility tools and reduce form usability.

<!-- Correct -->
<label for="banana">Banana:</label>
<input type="text" id="banana" name="banana">

<!-- Incorrect (no id to connect to) -->
<label>Cherry:</label>
<input type="text" name="cherry">

Labels can be placed above, beside, or inline with inputs. Use CSS for layout and spacing, but structurally, the <label> tag is essential either way.

placeholder is an attribute inside input elements. It shows greyed-out text that disappears when users start typing. Think of it as a gentle suggestion or hint.

<input type="text" name="fruit" placeholder="e.g., Apple">

[ e.g., Apple ]

It’s not a substitute for a label — it complements the label. Don’t rely on placeholders for critical information.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="you@example.com">

Email Address: [ you@example.com ]

The label explains what the field is. The placeholder suggests how to fill it.

Text

<input type="text" placeholder="Enter fruit name">

Email

<input type="email" placeholder="example@domain.com">

Password

<input type="password" placeholder="Min 8 characters">

Textarea

<textarea placeholder="Write your thoughts here..." rows="4"></textarea>

[ Write your thoughts here... ]

• Using placeholder instead of label: Screen readers ignore placeholders
• Missing label-id pairing: This breaks accessibility
• Placeholder with critical instructions: They disappear when users type

<form>
  <label for="name">Your Name:</label>
  <input type="text" id="name" name="name" placeholder="Hello World"><br><br>

  <label for="fruit">Favorite Fruit:</label>
  <input type="text" id="fruit" name="fruit" placeholder="Apple, Banana, etc.">
</form>

Your Name: [ Hello World ]
Favorite Fruit: [ Apple, Banana, etc. ]

Labels and placeholders work together to guide users through form fields clearly and accessibly. You now know how to:

• Use the <label> tag and connect it to inputs with the for attribute
• Use the placeholder attribute to provide example input or suggestions
• Combine both for an optimal form experience

Choose the option that lists all and only the correct statements.

1. Improves accessibility for screen readers
2. Allows keyboard users to focus input using the label
3. Visually styles the input text
4. Helps associate form fields with descriptive text

Choose the option that lists all and only the correct statements.

1. <label for="roll">Roll Number</label><input id="roll" placeholder="Enter your roll no">

2. <input id="student" placeholder="Student Name"><label for="student">Name</label>

3. <label><input type="text"> Parent Name</label>

4. <input placeholder="" label="Class">

In the next lesson, we’ll dive into Form Validation — how to ensure fields are filled out correctly before submitting.