Forms are everywhere on the web – it's the primary way users can interact with a web-based system. If your site or app uses forms (and we'd bet that it does) those forms need to be well designed, or users aren't going to follow through. They may not sign up for your service, they may not fill out their demographic information, they may not even log in again after sign up.
We love well-designed forms here at ZURB, and recently we've been exploring some cool new tricks for how we can display form inputs and labels in a concise, usable and totally awesome way.
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. Easy, right? But what if the browser focuses on the first field right off the bat...what field is it? The label is gone, so to find out what we're supposed to type we have to switch out, then back...what a terrible interaction! This little jolt could be the difference between a conversion and an abandoned form. Happily, there's a better way.
The first implementation we saw of this was over on the MobileMe login screen. We sniffed around a little and figured out how to create that type of interaction ourselves in an abstracted fashion – now we can use it when we want with a simple plugin. You can too. Check it out:
The HTML
Nothing shocking here: in order to get the effect we want you need three elements.
- A container div for the input (we'll use span.wrap)
- A label (label.overlay)
- A form input (input.input-text)
The only piece here beyond even the most basic forms is the input/label container which actually works for us, allowing us to tailor our CSS and Javascript to only the elements we want. This technique is cool, yeah, but with great power comes great responsibility: we want to use this in certain circumstances but certainly not everywhere.
The CSS
The CSS is dead simple. For our example we'll set all our inputs to a width of 200px and a font-size of 18px. You don't have to use static widths for this to work but it simplifies our example.
Now we position the label behind the form element and set the form element background to "none." The label then becomes the form element background and between the two we can still create any form element design we'd like.
The Javascript
There's nothing too fancy about the Javascript but there are a couple of nuances. At ZURB we generally use either JQuery or Prototype – this example uses Prototype to select the element but how you select these is totally up to you.
The Javascript has to accomplish a few goals:
- When the user clicks into an element, reduce the label opacity by half
- When the user starts typing, reduce the label opacity to 0
- When the user switches out of the field check if the field is empty - if so, bring the label back to the original opacity
The observer snippet in the middle of that javascript code block solves an odd little problem for us: autocomplete doesn't fire javascript events in most browsers. If Firefox drops in your username and password for you, the labels won't fade back like they should. We get around that by checking the field value on a timer – the user will see a flash after the autocomplete and everything will be just ducky. Cool, huh?
Et Voila! Super Awesome Form Labels
When you've got these few pieces in place you'll have forms that look more or less like these. We added some styles to the form inputs for the grey borders, etc – but you can handle all that. We also threw in some sweet CSS3 transitions that make these elements really sing in cutting-edge browsers.
Use Sparingly
This is a cool effect that solves an obnoxious little usability problem for inline labels, and we're getting some great use out of it already on the public facing pages for Notable, our upcoming feedback tool – but we don't use it everywhere and neither should you. It has strong novelty appeal to help you get that conversion, and the interaction is pretty smooth, but in a large form ease of comprehension is more important than slick presentation. Use your best judgement: we trust you.
Jonathan wrote this on in Product Design. It has 23 comments.