The Idea

Though top-aligned labels work well within the tight constraints of mobile screens, labels inside input fields can work even better. ~ Luke Wroblewski (Mobile First)

The traditional solution for labels inside the input is similar to the placeholder attribute in that once input is started, the label disappears. So once we have some input we loose our guide for what the input is for, which is not great. This plugin is a new way to deal with this problem.

So after reading Luke's book I figured I would polish this up and make it a bit more responsive and re-publish it.

The Code

<div class="field-wrap text">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
</div>

.leSlide-wrap {
    position: relative;
}
.leSlide-wrap label {
    position: relative;
    z-index: 1;
    white-space: pre;
}
.leSlide-wrap input,
.leSlide-wrap textarea {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

jQuery(document).ready(function($){
    $('input, textarea').leSlide({
        // Options
    });
});