LabelinPlace

A simple fully customizable form enhancement plugin for in-field label support.

Visit the project page for more information and usage examples!

Install

Four simple steps to install and configure labelinplace plugin

Step 1. Include jQuery

Include the last version of jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Step 2. Include jQuery Words Rotator Code

Insert into your page's head tag:

<link rel="stylesheet" href="jquery.labelinplace.css">
<script src="jquery.labelinplace.js"></script>

Step 3. HTML code

<label for="name">Your name</label>
<input type="text" class="labelinplace" name="name">

Step 5. Javascript code

<script type="text/javascript">
    $(function () {
        $(".labelinplace").labelinplace();
    });
</script>

Configure

$("#myForm .mylabel").labelinplace({
    labelPosition: "up",                   //position for the placeholder [up|down]
    classPlaceholder: "mypaceholder",       //class for the label when act as placeholder
    classLabel: "mylabel",                  //class for the label when act as label
    classIcon: "myicon",                    //class for the icon container
    wrapperClass: "mygroup",                //class for wrapper of the input+label
    animSpeed: 200,                         //speed of the animation
    labelArrowDown: null,                   //down icon (image or font) 
    labelArrowUp: null,                     //up icon (image or font)
    labelArrowRight: null,                  //right icon (image or font)
    labelIconPosition: "append"             //position of the icon [append|propend]
    inputAttr: "name"                       //the attribute that contains the name of INPUT/TEXTAREA
});

License

Labelinplace is licensed under the MIT license.