HTML5 Placeholder Attribute

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 :
HTML5 Placeholder Attribute

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest

Share This

Share this post with your friends!

Share This

Share this post with your friends!