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.
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.
We’ll start with the HTML. Nothing fancy here, just your standard sign-up form with labels and inputs.
- Add the focus class to the label when the user clicks into a field and move the mouse cursor to start position
- Add the typing class as soon as they start typing to make the difference
- 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.
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.
Next step, I will handle the CSS classes to get rid of the label values at focus and blur events.
Finally, I have complete jQuery snippet:
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.
Inline Form Labels with JQuery (View in Action)
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