HTML placeholder Attribute
Description
The HTML placeholder
attribute provides a short hint that describes the expected value of an input field (e.g., a sample value or a brief description of the expected format). This hint appears within the input field before the user enters a value and disappears when the user starts typing. The placeholder
attribute can be used with various form elements, such as <input>
, <textarea>
, and sometimes <select>
, depending on the browser support. It's especially useful for providing guidance to the user on what information is required or the format it should be in, without cluttering the UI with additional labels or text outside the input field. This attribute is part of the HTML5 specification and is widely supported by modern web browsers.
Syntax
<input placeholder="text">
Values
- textString value. Text to display inside the input field when it is empty.
Applies To
The placeholder
attribute can be used on the following html elements.
Example
<form action="formscript.php">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" placeholder="Enter your first name"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" placeholder="Enter your last name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="john.doe@example.com"><br><br>
<input type="submit" value="Submit">
</form>
Browser Support
The following table will show you the current browser support for the HTML placeholder
Attribute.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 3 | 4 | 12.1 | 4 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 12.1 | 3.2 | 1 | 37 |
Last updated by CSSPortal on: 26th March 2024