Use Placeholder Attributes in non-HTML5 Browsers

Every time I build a site or update a web site, I am always faced with a difficult question.  It is not getting the requirements from a client nor is it determining how much money to charge but rather what technology do I use to build it.  With Jquery releasing new updates, .NET framework releasing, and the launch of HTML5, it always is a balance to live on the cutting edge without getting bloody. So it is always nice to see widgets, and plugins that take this into account.  This is because whether a user is using a tablet, notebook, desktop, or a melting pot we must prepare. There are a lot of nice features of HTML5 and some features that are just starting to be born as a result of HTML5.  In any case, I want to start using more of html5 but also realize that users may not have HTML5 enabled devices.  If you jump over to and look at the browser numbers and you can see as of August 2013 there is still at least 22% of the browsers which are not html-5 compliant (any IE under 9.0).


With this in mind, I was excited to see a jquery plugin that takes advantage of the new attribute called ‘Placeholder’. If you have ever developed forms you know that having that lightly colored gray text background on each text field not only assists the users in knowing what specific data you are looking for but also provides a polished look on something that can be a necessary evil. (User Data input).

The nice feature about this plugin is if an html5 compliant browser uses the site then this plugin will not be used, but if the browser is non-compliant than the jquery plugin gets used. In the end you code the same way and let the script determine for you.

See the example below take from here;

[code language=""html""]<br /><form><br /><%%KEEPWHITESPACE%%>   <p><label><input type="search" name="search" placeholder="Search this site…"></label></p><br /><%%KEEPWHITESPACE%%>   <p><label><input type="text" name="name" placeholder="e.g. John Doe"></label></p><br /><%%KEEPWHITESPACE%%>   <p><label><input type="email" name="email" placeholder="e.g. address@example.ext"></label></p><br /><%%KEEPWHITESPACE%%>   <p><label><input type="url" name="url" placeholder="e.g."></label></p><br /><%%KEEPWHITESPACE%%>   <p><label><input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"></label></p><br /><%%KEEPWHITESPACE%%>   <p><label for="p"></label><input type="password" name="password" placeholder="e.g. hunter2" id="p"></p><br /><%%KEEPWHITESPACE%%>   <p><label><textarea name="message" placeholder="Your message goes here"></textarea></label></p><br /><%%KEEPWHITESPACE%%>   <p><input type="submit" value="type=submit"></p><br /><%%KEEPWHITESPACE%%>  </form><br /><%%KEEPWHITESPACE%%>  <script src="//"></script><br /><%%KEEPWHITESPACE%%>  <script src=""></script><br />[/code]

If you go to the site you and use the example you can see that if your browser is html5 compliant it will not use the script otherwise it uses it and you just code it the same.

Download script and samples

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

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