Using Placeholder Text

To add a hint to an HTML input element, use the placeholder attribute to display a short piece of text that disappears once the user begins typing.

Placeholder text is quite useful for giving users a quick idea of what kind of information is expected in a specific field. For example, in an email input, you might use placeholder="[email protected]" to show the correct format.

Basic Usage

The placeholder attribute can be added to any text-based input field:

Placeholders vs. Labels

An important point to remember is that a placeholder is not a replacement for a label. Labels are always visible and are essential for accessibility, while placeholders disappear as soon as the user interacts with the input. If you rely solely on placeholders, your users may forget what a field was for (or how to format their input) after they start typing. This forces them to delete their input to see the placeholder text again.

Styling the Placeholder

You can use the ::placeholder CSS pseudo-element to change the color, font, or style of your placeholder text:

Full Working Example

In the following example, placeholders are used in both a search field and a newsletter input: