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">
The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.
<!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.
When the execution process is completed successfully we will get the following output :