The placeholder attribute adds a hint to an input element.
The hint appears as muted text inside the control and specifies what data to enter.
Elements that accept this attribute includes <input> and <textarea>.
Two <input> elements with placeholder attributes.
The placeholders specify what data the input boxes expect.
<form action="/tutorial/action.html">
<input type="text" name="firstname" placeholder="Enter first name"><br /> <br />
<input type="text" name="lastname" placeholder="Enter last name"><br /> <br />
<input type="submit">
</form>
For additional details see our HTML input placeholder Reference.
The placeholder attribute adds a hint to an input or textarea element.
The hint appears as muted text inside the control. It disappears when the user starts entering data.
For <input> elements, placeholders only apply to these types:
<tagname placeholder="text">
| Value | Description |
|---|---|
| text | String value. The text hint. |
These elements accept the placeholder attribute.
| Elements | Description | |
|---|---|---|
| <input> | Specifies an input field -- see example above | |
| <textarea> | Creates a multi-line text input field. |
A <textarea> with a placeholder attribute.
The placeholder specifies the data the textarea expects.
<textarea rows="5" cols="45"
placeholder="Please enter your feedback">
</textarea>
For additional details see our HTML textarea placeholder Reference.
Here is when placeholder support started for each browser:
 Chrome
|
10.0 | Mar 2011 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
11.0 | Dec 2010 |
 Safari
|
5.0 | Jun 2010 |
