placeholder
A hint or example inside an empty field.
Syntax
<input placeholder="e.g. Anna">Examples
Hints with an example of the format:
<label>Phone <input type="tel" placeholder="+1 555 0100"></label><br>
<label>Message <textarea placeholder="Your question…"></textarea></label>Change the hint colour with ::placeholder:
<style>
input::placeholder { color: teal; font-style: italic; }
</style>
<input placeholder="Search drinks">Notes
The hint disappears as you type, so it does not replace a <label>: users forget what was asked. Its default colour is pale and hard to read — mind the contrast.
See also
- <input> — An input field; its kind is set by the `type` attribute.
- <textarea> — A multi-line text field.
- <label> — A label for a form field.
Related recipes
In the tutorial
- Forms — How a form works in HTML — the form tag, the input field, the name attribute, the submit button, action and the GET and POST methods.