Nice input labels using jQuery and CSS

css

form li { position: relative; }
label {
  position: absolute;
  top: 5px; // adjust as needed
  left: 5px;
}
//remove absolute position if the label comes after
//the input. Eg. a checkbox with a text next to it
input + label { position: static; }

html

<form action="/">
  <ul>
   <li>
    <label for="username">Username</label>
    <input id="username" type="text" autocomplete="off" />
   </li>
   <li>
    <label for="password">Password</label>
    <input id="password" type="password" autocomplete="off" />
   </li>
   <li>
    <input type="submit" value="login" />
   </li>
  </ul>
</form>

jquery

//loop through all text inputs, password inputs and textarea
var inputs = $('input[type="text"], textarea, input[type="password"]');

// remove label on focus
inputs.focus(function(){
  $('label[for="'+$(this).attr('id')+'"]').hide();
});
inputs.blur(function(){
  var that = $(this);
  if (that.val() == ""){
    $('label[for="'+that.attr('id')+'"]').show();
  }
});
inputs.blur();