A simple fully customizable form enhancement plugin for in-field label support.
Visit the project page for more information and usage examples!
Four simple steps to install and configure labelinplace plugin
Include the last version of jQuery
Insert into your page's head tag:
<link rel="stylesheet" href="jquery.labelinplace.css">
<script src="jquery.labelinplace.js"></script>
<label for="name">Your name</label>
<input type="text" class="labelinplace" id="name">
<script type="text/javascript">
$(function () {
$(".labelinplace").labelinplace();
});
</script>
$("#myForm .mylabel").labelinplace({
labelPosition: "top", //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
});