Axent Self labeled inputs

About

Axent.SelfLabeledInput is a prototype.js based class that changes your standard labels to the new web 2.0 like.

Example

Before (your standard form)

Your Comment

After

Your Comment

Usage

HTML Code

<form method="get" action="" id="after">
    <fieldset>
        <legend>Your Comment</legend>
        <div class="input">
            <label for="firstName">First Name</label><input type="text" id="firstName" name="firstName"  />
        </div>
        <div class="input">
            <label for="lastName">Last Name</label><input type="text" id="lastName" name="lastName"  />
        </div>
        <div class="input">
            <label for="eMail">E-mail</label><input type="text" id="eMail" name="eMail"  />
        </div>
        <div class="input">
            <label for="comments">Comments</label><textarea id="comments" name="comments"></textarea>
        </div>
        <div class="submit">
            <input type="submit" value="Submit Your Comment" />
        </div>
    </fieldset>
</form>

Javascript Code

<script type="text/javascript">
//<![CDATA[
new Axent.SelfLabeledInput('#after label');
//]]>
</script>

Download

Requirements