jQuery Super Labels Demo

All of the below use the following form unless otherwise specified.

<form action="" method="POST">
	<ul>
		<li>
			<label for="text-input">Name</label>
			<input type="text" name="text-input" value="" />
		</li>
		<li>
			<label for="textarea">Message</label>
			<textarea rows="2" cols="20" name="textarea"></textarea>
		</li>
		<li>
			<label for="select">Why is the sky blue?</label>
			<select rows="2" cols="20" name="select">
				<option value="1">It's painted blue.</option>
				<option value="2">Why not?</option>
				<option value="3">Rayleigh scattering.</option>
			</select>
		</li>
	</ul>
</form>

Basic Example

$(function() {
	$('form').superLabels({
		labelLeft:5,
		labelTop:5
	});
});

Tweakable Example

Simply click on the values below for the items you want to edit, change the values and click out of the field again.

$(function() {
	$('form').superLabels({
		duration:500,
		easingIn:'easeInOutCubic',
		easingOut:'easeInOutCubic',
		fadeDuration:250,
		opacity:0.5
	});
});

Character Limit Example

$(function() {
	$('form').superLabels({
		autoCharLimit:true
	});
});

Note that in this example, the "Name" field overrides the auto flag set above and is set to hide the label after 5 characters:

<li>
		<label for="text-input">Name</label>
		<input type="text" name="text-input" value="" data-sl-char-limit="5" />
	</li>

Placeholder Example

This example uses a form with only the "Name" fields to show the placeholder functionality.

Hover over the label on the second field to see what superLabels does with the placeholder attribute.

<form action="" method="POST">
	<ul>
		<li>
			<label for="text-input">Name</label>
			<input type="text" name="text-input" value="" />
		</li>
		<li>
			<label for="text-input">Name with placeholder</label>
			<input type="text" name="text-input" value="" placeholder="Your name" />
		</li>
	</ul>
</form>