HTML <input> placeholderAttribute
Example 1
Two input fields with placeholder text:
<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
The placeholder text can also be assigned a color.
Example 2
Set the color of the placeholder text:
<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the attribute.
| Attribute | |||||
|---|---|---|---|---|---|
| placeholder | 10.0 | 10.0 | 4.0 | 5.0 | 11.0 |
Definition and Usage
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g., a sample value or a short description of the expected format).
The hint is displayed in the input field before the user enters a value.
Note:The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
Differences Between HTML 4.01 and HTML5
The placeholder attribute is new in HTML5.
Syntax
<input placeholder="text">
Attribute Values
| Value | Description |
|---|---|
| text | Specifies a short hint that describes the expected value of an input field. |
HTML <input> Tag Other Extensions