Minimalism has become a common feature in the Web 2.0 world. Everything including forms have now become minimalistic. Putting labels alongside form fields has become too Web 1.0 ish.
Most websites these days use watermarks or placeholders to provide hints to users on how to fill a form field. Now if you have just migrated from the Web 1.0 to Web 2.0 and are still wondering how to place watermarks or placeholders in your forms, read on.
Method 1 : Changing value of the text field based on events
This method has been used by many websites as it is easy to implement and is the most browser compatible method.
Basically you will be adding event listeners for the ‘onfocus’ and ‘onblur’ events of the form elements which you intend to put as placeholders on.
In this example you we set the default value as ‘Search’. When the field loses focus, the ‘onblur‘ event is triggered which checks whether the current value of the text field is empty. If it is empty it sets the value of the text field as ‘Search’.
On the ‘onfocus‘ event the value of the text field is checked against the default value. If it is same as the default value, which is ‘Search’, the value of the field is set empty.
[embedit snippet=”watermark-method-1″]
Pros
1. Easy to implement.
2. Compatible with all browsers.
Cons
1. Difficult to validate the forms, both on client side and server side.
2. Clutters up the html markup.
3. Advanced styling or animations are not possible.
4. Not compatible with password fields as it fills the default ‘disc’ character in the password field.
Method 2 : Using a plugin like Watermarkify
Watermarkify is a jQuery plugin that makes placing placeholders in form fields with animations and styling easy. For using Watermarkify you need to include it’s css and js files along with jQuery. While creating the form fields you should supply a ‘title’ attribute that specifies the placeholders that need to be put on top of them. Now just call the watermarkify function on the your input fields.
[embedit snippet=”watermark-method-2″]
Pros
1. Animations of placeholders are possible. Even supports easing.
2. Doesn’t mess up validations as the value of the fields are not altered by the placeholder.
3. Compatible with ‘password’ fields and textareas.
4. Advanced CSS styling is possible.
5. Compatible with most browsers.
Cons
1. Requires jQuery.
2. Requires adding additional Javascript and CSS files.
Method 3 : HTML 5!
This method is for those who really needs to experience HTML 5.
HTML 5 is so cool that it supports placeholders out of the box. It is the easiest and the most convenient way to place watermarks in your form fields. You just need to add a ‘placeholder’ attribute to your input tag to get going.
[embedit snippet=”watermark-method-3″]
Pros
1. Super easy to implement.
2. Doesn’t mess up validations.
3. Compatible with ‘password’ fields and textareas.
Cons
1. Not supported in Internet Explorer below version 10.
Ajay Balachandran(http://www.ajaybalachandran.com)