Inline labels

inline.html

<label class="inline" for="field">Label</label>
<input id="field" name="field" />

inline.js

function supports_input_placeholder() {
	var i = document.createElement('input');
	return 'placeholder' in i;
}

$("label.inline").each(function(){
	var label = $(this);
	var labelText = label.text();
	var field = $("#"+label.attr("for"));
	
	// Hide label
	$(this).hide();
	
	if(supports_input_placeholder()){
		field.attr("placeholder",labelText);
	}else{
		var form = $(this).closest("form");
		
		// Set label if nothing entered
		if(field.val() == "" || field.val() == labelText){
			field.val(labelText).addClass("placeholder");
		}
		
		// Clear value if label still present
		field.bind("focus",function(){
			if(field.val() == labelText){
				field.val("").removeClass("placeholder");
			}
		}).bind("blur",function(){
			if(field.val() == ""){
				field.val(labelText).addClass("placeholder");
			}
		});
		
		// Clear input on form submit if nothing entered
		form.bind("submit",function(){
			if(field.val() == labelText){
				field.val("");
			}
		});		
	}
});