Placeholder text in HTML

The basic pattern

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

The label says what the field is. The placeholder shows an example of what to type. MDN's own example follows the same pattern: an "Enter your name:" label with the placeholder "e.g. Mike Shinoda".

Which fields support it

According to MDN, placeholder works on these <input> types:

• text
• search
• url
• tel
• email
• password

It also works on <textarea>, which is the only element where the placeholder may contain line breaks. In an <input>, a line feed or carriage return in the value clips the placeholder text.

Good placeholder text examples

MDN says effective placeholder text is "a word or short phrase that hints at the expected data type, not an explanation or prompt". Some examples that follow that rule:

• Search: Search recipes
• Email: name@example.com
• Phone: 07700 900123
• Website: https://example.com
• Date in a text field: DD/MM/YYYY
• Message: Tell us what you need

For a search box, name what can be searched ("Search recipes", "Search help articles") rather than repeating "Search…". For example values, use obviously fake ones, so nobody mistakes the hint for something already filled in.

Why a placeholder can't replace a label

MDN is direct about this: "The placeholder must not be used instead of a <label>." The reasons it gives:

• It disappears. Once someone types, the hint is gone. People who look away and back lose the instruction.
• Screen readers don't announce it by default. The label is what tells assistive technology what the field is for.
• Labels are click targets. Clicking a label moves focus to its field.
• It's low contrast by design, so it isn't mistaken for typed text, which makes it harder to read for people with low vision.

If a field needs instructions that must stay visible, put them in text next to the field and link it with aria-describedby, as MDN suggests.

Style the placeholder

Change the colour, font style or opacity with the ::placeholder pseudo-element:

input::placeholder {
  color: #767676;
  font-style: italic;
}

Only properties that apply to ::first-line work there. Keep enough contrast: MDN cites WCAG's 4.5:1 for normal text. Our guide to placeholder text colour in CSS covers the details.

Placeholder text in UI design

Designers use "placeholder" for two things on a screen. The first is the hint in a form field, covered above. The second is filler copy, such as lorem ipsum, that stands in for content that hasn't been written yet. Our lorem ipsum generator makes that kind, and its HTML option wraps the text in <p> tags ready for your template.