The placeholder attribute is used with an <form> tag to insert the text inside the form field, such as <input> tag. The text which is defined in the placeholder attribute is visible in the input field but as we enter some text in it gets invisible. When focus moves to the field, the placeholder text will disappear from the screen. It is very useful in the scenarios where we need to provide the information or instructions to the user about the filed and it has to hide when user start entering the values to that field. Prior to this attribute, programmer has to manually handle it in the JavaScript code.
This example tutorial highlights the use of placeholder attribute in HTML5 with simple example.
The Syntax of the placeholder Attribute
<input type= "text" placeholder= "name">
Browser Support
The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.
Example
<!DOCTYPE html>
<head>
<title>Placeholder attribute</title>
</head>
<body>
<h3>Form</h3>
<form>
Name <input type="text" placeholder="First Name"><br>
Surname<input type="text" placeholder="Last Name"><br>
DOB <input type="text" placeholder="Date of Birth"><br>
Residential Address<input type="text" placeholder="Address"><br>
Phone Number <input type="text" placeholder="Phone Number">
<input type="Submit" value="Submit">
</form>
</body>
</html>
Here you can notice that, we have used place holder for each of the form element.
Example Application Test
- Save the file as placeholder_example.html in your system.
- Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
Output
When the execution process is completed successfully we will get the following output :
Spring Test MVC HtmlUnit 1.0.0.M1 Release