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>