Űrlap design sliding labelekkel

body {
font:12px/1.3 Arial, Sans-serif;
}
form {
width:380px;
padding:0 90px 20px;
margin:auto;
background:#f7f7f7;
border:1px solid #ddd;
}
div {
clear:both;
position:relative;
margin:0 0 10px;
}
label {
cursor:pointer;
display:block;
}
input[type="text"] {
width:300px;
border:1px solid #999;
padding:5px;
-moz-border-radius:4px;
}
input[type="text"]:focus {
border-color:#777;
}
input[name="zip"] {
width:150px;
}
 
/* submit button */
input[type="submit"] {
cursor:pointer;
border:1px solid #999;
padding:5px;
-moz-border-radius:4px;
background:#eee;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
border-color:#333;
background:#ddd;
}
input[type="submit"]:active {
margin-top:1px;
}

$(function(){
$('form#info .slider label').each(function(){
	var labelColor = '#999';
	var restingPosition = '5px';
 
	// style the label with JS for progressive enhancement
	$(this).css({
		'color' : labelColor,
		 	'position' : 'absolute',
	 		'top' : '6px',
			'left' : restingPosition,
			'display' : 'inline',
    	               'z-index' : '99'
	});
 
	// grab the input value
	var inputval = $(this).next('input').val();
 
	// grab the label width, then add 5 pixels to it
	var labelwidth = $(this).width();
	var labelmove = labelwidth + 5;
 
	//onload, check if a field is filled out,
if so, move the label out of the way
	if(inputval !== ''){
		$(this).stop().animate({ 'left':'-'+labelmove }, 1);
	}
 
	// if the input is empty on focus move the label to the left
	// if it's empty on blur, move it back
	$('input').focus(function(){
		var label = $(this).prev('label');
		var width = $(label).width();
		var adjust = width + 5;
		var value = $(this).val();
 
		if(value == ''){
			label.stop().animate({ 'left':'-'+adjust }, 'fast');
		} else {
			label.css({ 'left':'-'+adjust });
		}
	}).blur(function(){
		var label = $(this).prev('label');
		var value = $(this).val();
		if(value == ''){
			label.stop().animate({ 'left':restingPosition }, 'fast');
		}
	});
})
});