The HTML placeholder attribute specifies a short hint that describes the expected value of an input field or text area.
Definition and Usage
➔ The hint appears in the field before the user enters a value and disappears after the field is focused or clicked.
➔ The placeholder attribute is supported by most input type elements.(such as input type text, search, url, tel, email, password, number, textarea.)
➔ Placeholder text can be styled using the CSS ::placeholder pseudo-element.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML placeholder attribute Example</title>
<style>
input::placeholder {
color: red;
opacity: 0.4;
}
</style>
</head>
<body>
<h3>HTML placeholder attribute Example</h3>
<p>Type 4 uppercase or lowercase letters in the textfield to match the pattern and click Submit.</p>
<form action="#">
<label for="codeId">Batch code:</label>
<input type="text" id="codeId" name="code" pattern="[A-Za-z]{4}"
placeholder="4 letters in uppercase or lowercase." title="4 letters in uppercase or lowercase."><br><br>
<input type="submit">
</form>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| placeholder | <input>, <textarea> |