How to create an input placeholder from a label with jQuery

Forms should be as intuitive and easy to fill out as possible. One way to help your users out is by placing your label helper text inside the input field, and hiding it when the user goes to use it. After following this tutorial, you’ll end up with is a nice solution to turn your boring old form labels into a more modern and intuitive form hint.

The HTML

<div class="form">
    <label>First Name</label>
    <input type="text" />
    <label>Last Name</label>
    <input type="text" />
    <label>Email</label>
    <input type="text" />
    <input type="submit" value="Submit" />
</div>

Basic HTML, some labels and inputs.

The jQuery

You only need a little bit of jQuery to achieve this effect. The comments in the code should outline everything you need to know.

/*
    Create the placeholders from the labels
*/
//loop through each label and
$("label").each(function () {
    //make a variable for this label
    el = $(this);
    //get the value of the label
    label_value = el.html();
    //hide the label
    el.hide();
    //target the next sibling input and
    //fill it with the label's value
    el.next('input').val(label_value).addClass("not-filled-in");
});

We loop through each label, hide it, take it’s value, and impose that inside of the next input field. We also add a class so that we can style how the form input looks when it isn’t filled in with user information (like graying the text out a bit).

/*
    Handle the form placeholders actions (clearing & replacing)
*/
//when the input is clicked on (like if you were to type in it)
$("input").focus(function () {
    //make a variable for this input
    el = $(this);
    //make a variable for it's current value
    input_value = el.val();
    //get the value that it's label is
    label_value = el.prev('label').html();
    //check to see if the current value matches the 
    //old label value
    if (input_value == label_value) {
        //if it does clear the form
        el.val('').removeClass("not-filled-in");
    }
});

When the user clicks on the input area, the :focus pseudo selector is used. We target this in jQuery and check to see if the current text in the input matches what the label was. If it does: clear the input because the user is trying to enter information. If it doesn’t- then do nothing because the user typed something in the field.

//when the input is no longer focused (ie. you click away)
$("input").blur(function () {
    el = $(this);
    if (el.val() == '') {
        label_value = el.prev('label').html();
        el.val(label_value).addClass("not-filled-in");
    }
});

You can target when the user clicks away from a focused element with blur. Here, when the user clicks away, we check to see if they typed anything. If they did, do nothing, and if they didn’t, make sure to fill the input back with the corresponding label.

The CSS

The other CSS in the demo is just presentational- this is the CSS that is relevant to the tutorial.

.form input.not-filled-in {
    color:#bbb;
}

Demo

Quick Note:

Even though placeholder support on IE is bad- you should still be using the tag as much as possible. The above code is best used in a scanario where you can’t edit the HTML for the form (to add in placeholders) or something like that. You can also easily adapt the above code to use edit the input’s placeholder attribute rather than it’s value (or in addition to) for an all around solution.