Have you ever visit Apple's MobileMe website? The login screen has form labels that are written within the value of their associated input field.

MobileMe Login Form

MobileMe Login Form

Inline labels are nothing new – in fact the easiest way to label a field is to simply set the field value up front and blow it away when the field gains focus. This is handy way for designers to save space and make their designs cleaner all-around. Unfortunately for us developers, simply setting the input value isn't very semantic or usable then you can't do it simple. I've just use a little jQuery to make it all happen.

The HTML

We'll start with the HTML. Nothing fancy here, just your standard sign-up form with labels and inputs.

<form id="signup" name="signup">
	<label for="email">Email Address</label>
	<input class="text" name="email" type="text" />
	<label for="username">Username</label>
	<input class="text username" name="username" type="text" />
	<input class="btn" type="submit" value="Sign Up" />
</form>

And a Little Bit of Javascript

The JavaScript needs to do three things:

  1. Add the focus class to the label when the user clicks into a field and move the mouse cursor to start position
  2. Add the typing class as soon as they start typing to make the difference
  3. Bring the label back if they leave the field empty and switch to another field.

I've found a small jQuery snippet allow me choose the mouse cursor position when I click on input field.

	$.fn.setCursorPosition = function(pos) {
		if ($(this).get(0).setSelectionRange) {
			$(this).get(0).setSelectionRange(pos, pos);
		} else if ($(this).get(0).createTextRange) {
		var range = $(this).get(0).createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
		}
	}

First of all, I will want to loop through our label elements and assign their values to the inputs that immediately follow. Then you'll want to hide those labels.

    $("#signup label&quot.each(function (i) {
        $(this).next("input&quot.attr("value",$(this).html()+"..."
        $(this).hide();
    });

Next step, I will handle the CSS classes to get rid of the label values at focus and blur events.

    $("#signup input&quot.focus(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            $(this).addClass("focus&quot.setCursorPosition(0);
        }
    });
    $("#signup input&quot.keypress(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            this.value = "";
            $(this).removeClass("focus&quot.addClass("typing"
        }
    });
    $("#signup input&quot.blur(function() {
		$(this).removeClass("focus&quot.removeClass("typing"
		if(this.value == "&quot{
		this.value = $(this).prev("label&quot.html()+"...";
		}
    });

Finally, I have complete jQuery snippet:

$(document).ready(function() {
	$.fn.setCursorPosition = function(pos) {
		if ($(this).get(0).setSelectionRange) {
			$(this).get(0).setSelectionRange(pos, pos);
		} else if ($(this).get(0).createTextRange) {
		var range = $(this).get(0).createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
		}
	}
    $("#signup label&quot.each(function (i) {
        $(this).next("input&quot.attr("value",$(this).html()+"..."
        $(this).hide();
    });
    $("#signup input&quot.focus(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            $(this).addClass("focus&quot.setCursorPosition(0);
        }
    });
    $("#signup input&quot.keypress(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            this.value = "";
            $(this).removeClass("focus&quot.addClass("typing"
        }
    });
    $("#signup input&quot.blur(function() {
		$(this).removeClass("focus&quot.removeClass("typing"
		if(this.value == "&quot{
		this.value = $(this).prev("label&quot.html()+"...";
		}
    });
});

Styling the form with CSS

The CSS isn't important at all to what we're trying to do, so I won't cover any of that. There are a few key CSS lines that give us the positioning and effects we want.

input {
		border: 1px solid #ccc;
		color: #000;
		font: inherit;
		padding: 4px;
		width: 230px;
	}
	input:focus { border-color: #99B32D;}
	.focus { color: #8F8F8F; }
	.typing { color: #99B32D; }

Inline Form Labels with JQuery (View in Action)

Conclusion

It’s so simple, but perfect that solves an obnoxious little usability problem for inline labels.
Smashing Magazine recently published an article by Zurb called Stronger, Better, Faster Design with CSS3 that expands on this technique and makes it even better with CSS3 by just masking the label so even when you click into the input you can still read the label.
You can use a simple jQuery plugin  to get the same result, its call In-Field Labels jQuery Plugin

Further Reading