Simple tiny jQuery plugin to handle form placeholding super easily.

jquery.form-placeholder.js

(function($) {
  $.fn.placeholder = function(message) {
    return this.each(
      function() {
        if ($(this).hasClass('form-placeholder-processed')) {
          detach($(this));
        }
        else {
          $(this).addClass('form-placeholder-processed');
          $(this).data('form-placeholder', message);
          $(this).data('form-placeholder-original-value', $(this).val());
          attach($(this), message);
        }
      }
    );
  }
  function attach($el, message) {
    if (!$.trim($el.val())) {
      $el.val(message);
    }
    else {
      $el.addClass('placeholder-active');
    }
    $el.focus(handleFocus);
    $el.blur(handleBlur);
    var $form = $el.parents('form');
    if ($form && $form.length > 0) {
      $form.submit(handleSubmit);
    }
  }
  function detach($el) {
    $el.unbind().removeClass('form-placeholder-processed');
    var originalValue = $el.data('form-placeholder-original-value');
    $el.val(originalValue);
    var $form = $el.parents('form');
    if ($form && $form.length > 0) {
      $form.unbind('submit');
    }
  }
  function handleFocus() {
    $(this).addClass('placeholder-active');
    var message = $(this).data('form-placeholder');
    if ($(this).val() == message) {
      $(this).val('');
    }
  }
  function handleBlur() {
    if ($(this).val() == '') {
      $(this).removeClass('placeholder-active');
      var message = $(this).data('form-placeholder');
      $(this).val(message);
    }
  }
  function handleSubmit() {
    $(this).find('.form-placeholder-processed').each(
      function() {
        var message = $(this).data('form-placeholder');
        if ($(this).val() == message) {
          $(this).val('');
        }
      }
    );
  }
})(jQuery);