HTML5 Placeholder Fallback

HTML5 has introduced many features to the browser;  some that can be used with form elements.One of these is the placeholderattribute to INPUT elements.  The placeholder attribute shows text in a field until the field is focused upon, then hides the text. It can be used on text, textarea, search, url, tel, email, and password fields.  You can always achieve the same effect with a few lines of JavaScript code, but native HTML5 support is much better!

All you need to do is add a placeholder attribute with the text of your choice.

<input type=”text” name=”first_name” placeholder=”Your first name…”>   View Demo

If you are interested in taking advantage of the new placeholder attribute. One thing to ensure is that older browsers function similarly to ensure consistency and proper user experience. So check for Placeholder Support first then do the fallback to older browsers, and ensure default values are not submitted in those older browsers.

Happy coding!

$(document).ready(function() {

Posted in HTML5, Web Development Tagged with: , ,