easy way we can set the water mark on textbox.
this is css & html
<style type="text/css"> input.watermark { color: #999; } //light silver color </style> <label>Email : </lable> <input id="email" type="text" />
this is jquery to set & unset water mark when require.
$(document).ready(function() { var watermark = 'Puts your email address'; //init, set watermark text and class $('#email').val(watermark).addClass('watermark'); //if blur and no value inside, set watermark text and class again. $('#email').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#email').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); } }); });

I have got it another way,

An email input field and css watermark class.
<style type="text/css"> input.watermark { color: #999; } //light silver color </style> <label>Email : </lable> <input id="email" type="text" />
jQuery to apply the watermark effect on email field.
$(document).ready(function() { var watermark = 'Puts your email address'; //init, set watermark text and class $('#email').val(watermark).addClass('watermark'); //if blur and no value inside, set watermark text and class again. $('#email').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#email').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); } }); });