• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

HTML5 Placeholder Attribute

March 18, 2014 //  by Krishna Srinivasan//  Leave a Comment

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

Category: HTMLTag: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Spring Test MVC HtmlUnit 1.0.0.M1 Release
Next Post: HTML5 Required Attribute »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact