HTML/CSS/JQUERY: Nice styling

gistfile1.html

<!-- Le html -->

<form class='form form-horizontal' action='' method=''>
	<!-- declaring a class of form looks odd, but it leaves me the option
	of having non-standard forms without having to overwrite standard form css -->
	
	<!-- Inputs and labels are grouped in fieldsets. This makes it much easier to 
	arrange them with css -->
	<fieldset>
		<label class='label placeholder'>First name</label><!-- This label serves as 
		a fallback, it will be removed with js because it has a class of placeholder -->
		<input class='input input-small' placeholder='First name'>
	</fieldset>

	<fieldset>
		<input type='submit' class='btn btn-large' value='Save'><!-- btn can be applied to 
		input submits, anchors, and buttons, to unify -->
	</fieldset>

</form>

<!-- Le CSS -->
<style>
/* Global form styles */
.form{}
	.input[type=text]{} /* We don't _need_ to prefix the selector with its parent .form, so 
	let's not. It will only make it more flexible. */
	.label{}
	.label.placeholder{}
	
	/* Horizontal forms */
	.form-horizontal{}
		.form-horizontal .fieldset{}
		

/* Global button styles*/
.btn{}
	.btn-large{}

/* ...etc */
</style>

<!-- Le js -->
<script>

	/* Placholders (there should be a minimizer check here, to skip placeholder-ing for browsers 
	that support the placeholder attribute) */
	$('.placeholder').hide();
	$('.input'){
		if( $(this).attr('placeholder') ){
			$(this).val( $(this).attr('placeholder') );
		}
	}
	$('.input').focus(function(){
		if( $(this).val() == $(this).attr('placeholder') ){
			$(this).val('');
		}
	});
	$('.input').focusout(function(){
		if( $(this).val() == '' ){
			$(this).val( $(this).attr('placeholder') );
		}
	})

	/* ...etc */
</script>