HTML placeholder Attribute

Introduction

The placeholder attribute shows hint text inside an empty <input> or <textarea>. It gives users a short example or format cue — like “Enter your username” or 555-123-4567 — and disappears when they type. It is not a label: always pair placeholders with a real <label>. Placeholder text is not submitted with the form (unlike value). Use it with pattern for format examples, and set element.placeholder in JavaScript when hints change dynamically.

What You’ll Learn

Purpose of placeholder Attribute

The primary purpose of placeholder is to improve form usability with a visual hint about what to enter or how to format input. A phone field might show 555-123-4567; a search box might show Search products….

Placeholders supplement labels — they do not replace them. Once the user starts typing, the hint vanishes, so critical field names must live in an associated <label>. For validation rules, use pattern, minlength, or helper text outside the field.

📝 Syntax

Add placeholder with a string hint on input or textarea:

<label for="username">Username:</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="Enter your username">

<label for="bio">Bio:</label>
<textarea id="bio" placeholder="Tell us about yourself…"></textarea>

Syntax Rules

• Value is a plain text string shown when the field is empty.
• Valid on input (most text-entry types) and textarea.
• Not valid on select, button, checkbox, or radio.
• Disappears when the user types; reappears if the field is cleared.
• Always include a <label for="…"> — do not use placeholder as the only label.
• JavaScript: input.placeholder = "New hint".
• Pair with pattern when showing an example format (placeholder = hint, pattern = rule).

💎 Values

The placeholder attribute accepts any text string:

• placeholder="Enter your username" — Descriptive hint.
• placeholder="555-123-4567" — Format example for phone.
• placeholder="Search…" — Search box cue.
• placeholder="Describe your issue…" — Multi-line textarea hint.

<input type="email" placeholder="you@example.com">
<input type="search" placeholder="Search docs…">
<textarea placeholder="Your message here"></textarea>

Applicable Elements

placeholder vs label vs value

Examples Gallery

Login form hints, dynamic placeholder in JavaScript, and textarea placeholder text.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"
    placeholder="Enter your username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"
    placeholder="Enter your password">

  <button type="submit">Submit</button>
</form>

<input type="text" id="dynamicField">

<script>
  document.getElementById("dynamicField").placeholder = "Search by product name…";
</script>

<label for="message">Your message:</label>
<textarea
  id="message"
  name="message"
  rows="4"
  placeholder="Describe your issue in detail…"></textarea>

♿ Accessibility

• Never replace labels — Placeholder is not exposed as the field name to assistive tech the way a <label> is.
• Low contrast risk — Placeholder text is often light gray; do not put essential instructions only in placeholder.
• Disappears on input — Users may forget the hint after typing; repeat important format rules outside the field.
• Associate labels — Use for / id on every input and textarea.
• Do not pre-fill with placeholder — Use value for real default data, not placeholder.

💡 Best Practices