<html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Placeholder Demonstrated</title> </head> <body> <header> <h1>HTML 5 Placeholder Demonstrated</h1> </header> <form> <input name="firstName" placeholder="First Name"> <input name="lastName" placeholder="Last Name"> <input type="submit" value="Submit"> </form> </body> </html>
When the simple page whose code is shown above is first loaded in the web browser, it appears respectively as shown in the following screen snapshots for Google Chrome 7.0, Firefox 3.6, Microsoft Internet Explorer 8.0, and Apple Safari 5.0.3 (the same versions used for all screen snapshots in this post).
Internet Explorer 8.0
As depicted in the screen snapshots above, the placeholder text appears to work properly for Chrome 7.0 and Safari 5.0, but is not yet supported in Firefox 3.6 or MSIE 8. For the two in which placeholder support obviously works on initial page load, I now show screen snapshots of how they behave when focus is placed on the "First Name" field.
As the two screen snapshots just displayed indicate, the browsers supporting HTML5 placeholder text for input fields, remove the placeholder text when focus is placed on the particular field, but leave the placeholder text for other fields of interest that have not already been populated.
The screen snapshots remind us that scripting support is still needed for placeholder text functionality in certain browsers. However, the ease of use for HTML5 placeholder text provides hope for reduced scripting needs in the future.