Before HTML5, JavaScript was the typical approach for placing placeholder text in input fields on an HTML form. With HTML5, this scripting is only needed to support pre-HTML5 browsers. The following simple HTML snippet shows how easy it is to apply placeholder text to input fields in HTML5.
Placeholder.html
<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).
Chrome 7.0
Firefox 3.6
Internet Explorer 8.0
Safari 5.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.
Chrome 7.0
Safari 5.0
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.
4 comments:
Browser support has been a major hurdle for HTML5. And this gets even more when we try to use , tags.
"audio, video tags"- Missed these in the above comment.
Mohamed,
I agree completely with you that browser support has been and still is a major hurdle for HTML5. In fact, it seems to continue the seemingly endless battle in web development of inconsistent HTML implementations across web browsers. I'll probably look at some of these issues (including the audio/video tags you mention) in future posts.
Thanks for the comments.
Dustin
FF 4 beta 7 was pushed to my opensuse laptop, so I tried your HTML out. It looks like it is supported correctly now.
Post a Comment