These days I am working on a couple of semi-stealth hobby Web apps in my spare time and, well, I want them to look gorgeous. Yesterday I was thinking about styling the login form for one of the apps and make it somewhat different to all those boring login forms we see everyday and everywhere on the web.

Sometime ago I read an article about this idea of showing labels behind fields rather than next to them and fade them out as soon as the user types in some text and I liked it. The login form that I have designed is based on the same idea but it’s even more gorgeous!

They say a demo is worth a thousand words so without further ado here’s the demo page. Go ahead and type in some text in the fields to see the effect.

As you can see rather than fading out the label, we move it to sit on top of the field. But the devil is in the details. In other words, the login form renders well even under the following conditions:

• In browsers that do not support stylesheets (e.g. in Lynx)
• With JavaScript disabled
• In IE 6 (IE 6 is still sooo popular in archaic environments). Well, no, just kidding. I don’t care about that creepy wombat anymore.

HTML Page

CSS

JavaScript

Update 1 – 3 July 2011:

I found a bug in the initial implementation given above a couple of days ago. Suppose that the login field contains one character and then the user quickly presses backspace and writes another character. This leads to the label staying behind the field while it’s not empty. Changing installAnimation like below fixes this bug:

Fixed installAnimation

This alternative implementation stops all the currently queued animations for the label element before starting a new animation.