HTML placeholder Attribute

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>.

Example

#

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.


Using placeholder

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:


Syntax

<tagname placeholder="text">

Values

#

Value Description
text String value. The text hint.

Elements that accept placeholder

These elements accept the placeholder attribute.

Elements Description
<input> Specifies an input field -- see example above
<textarea> Creates a multi-line text input field.

<textarea> with placeholder

A <textarea> with a placeholder attribute.
The placeholder specifies the data the textarea expects.

<textarea rows="5" cols="75" placeholder="Please enter your feedback">
</textarea>

For additional details see our HTML textarea placeholder Reference.


Browser support

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

You may also like



Guides