Accessible Inline Form Labels

contact_form.html

<form id="contact">
	<ul>
		<li>
			<label for="name">Name</label>
			<input type="text" id="name" name="name" value="" />
		</li>
		<li>
			<label for="email">Email</label>
			<input type="text" id="email" name="email" value="" />
		</li>
		<li>
			<label for="verbiage">Message…</label>
			<textarea id="verbiage" name="verbiage" rows="5" cols="25"></textarea>
		</li>
	</ul>
</form>

overlay.js

var oTxtFields = $('input,textarea');
$.each(oTxtFields, function(){
	var label = $('label[for=' + $(this).attr('id') + ']');
	label.addClass('overlayed');
	if (!$(this).val() == '') {
		label.hide();
	}
	$(this)
		.focus(function(e){
			$('label[for=' + $(e.target).attr('id') + ']').hide();
		})
		.blur(function(e){
			if ($(e.target).val() == '') {
				$('label[for=' + $(e.target).attr('id') + ']').show();
			}
		})
	;
});

style.css

form li {
	line-height: 1.5;
	margin-bottom: 1.5em;
	position: relative;
}

form label.overlayed {
	position: absolute;
	top: .15em;
	left: .5em;
	white-space: nowrap;
	color: #999;
}