The basic setup is this:
Limited space means no room for labels in a login form. So instead we used a preset value in the input elements, like so:
Which looks like this:
The easy way to blank out the descriptive text is to use the onfocus event like so:
But this is not enough for the password input, because we do not want to reveal a user’s password as it is typed. We must change the input type to password. This causes the input element to lose focus, so we set it again after changing type:
Cool. But it doesn’t work in Safari. Tabbing from the username field to the password field does not work as expected. The input element looks focused but it won’t accept any keyboard input until you click in the field.
Solution — use the select method instead of focus:
I hope that helps somebody out there in Google-vania.
[UPDATE 22 Feb 2008]
[UPDATE 16 Dec 2009]
I just came across a very interesting technique on Smashing Magazine’s blog. It involves placing a field’s label behind the field and fading it on focus. The label does not disappear completely until the user actually starts typing. Very elegant solution and it minimizes cases where a user may forget what a field’s purpose was because the descriptive text has disappeared.