First step is to create the form. I usually have all my forms inside a list:

UPDATE: It's necessary to turn off the "autocomplete" so the inputs don't get messed up.

markup
<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>

Don't forget the "for" attribute, the script will rely on it. Go ahead and add the following 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; }

Now the final touch. With some jQuery magic, lets make the label disappear on focus.

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();

Demo

Keith's Example using jQuery:
jQuery(function($) {
$('body').addClass('hasJS');
});

CSS
.hasJS .module {
display: none;
}

Why add a class if JavaScript is enabled?

Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.

My current project at work requires the content to be rendered for both enabled and disabled JavaScript browsers. I did a bit of research and found that most websites/solutions add the hasJS class to the body after the DOM is loaded. My first thought was, if the class gets added after the DOM is loaded, a shift on the page will occur providing a bad user experience. Yahoo was a site I researched and they have, IMHO, the cleverest solution of them all. They add the class to the HTML element instead of the BODY element. The first script block on the page to be loaded adds the hasJS class without dependency on libraries. Note: Yahoo uses another class name "jsenabled".

You might be asking why add the class to the HTML element? I think it makes more sense because the BODY is the beginning of the content. This means that everything after the body is "visible" to the user and blocking the content with a script tag isn't a good optimization practice. Here is the code to add the hasJS class to the body:

hasJS Script Block
<script type="text/javascript">
  document.getElementsByTagName('html')[0].className = 'hasJS';
</script>

NOTE: If you already have more classes on the HTML element, use document.getElementsByTagName('html')[0].className += ' hasJS'; instead.

jQuery Code
$('.scrollPage').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});

The code gets the href from the anchor and uses it as the target element. If you want to adjust the scroll speed just change the 500.

Don't forget to checkout the live demo

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7 & 8
• Internet Explore 6