Here’s a little piece of jquery/javascript that I find myself using frequently. It’s not revolutionary - in fact I think I originally based it on somebody else’s code, but I think this is the only one that retrieves the hint text from the input's associated label. This means that it degrades really nicely, and encourages a good semantic form.

$.fn.hint = function () {
	return this.each(function () {
		var input = $(this);
		if (input.attr('type')!='text' && 
                   input[0].tagName != 'TEXTAREA'){
			return;
			}
		
    	var form = $(this.form);

		var label = form.find('label[for=' +
                     $(this).attr('id') + ']');
		var text = label.text()
		label.hide();
		
		function remove() {
			if (input.val() === text && 
                              input.hasClass('blur')) {
				input.val('').removeClass('blur');
      			}
			}

		input.blur(function () {
			if (this.value === '') {
				input.addClass('blur').val(text);
        	}
		}).focus(remove).blur();
		form.submit(remove);
      	$(window).unload(remove); // handles Firefox's autocomplete
    });
};

And then to use it:

<label for =”to_hint”>Hint text</label>
<input type = 'text' id = “to_hint”></input>
...
$(“input#to_hint”).hint()

For example: Hint text