There are typically only two types of forms that tend to get squeezed into tight quarters in page layouts: login, and search. For this reason, web designers are often tempted to save space by hiding the labels on these forms and assuming that a user will intuitively know what to type into each textbox. With a simple search form, this is logical because you have a textbox next to a button that says “Search”, “Go”, or perhaps “I’m feeling Lucky”. Login forms are a little trickier. For most of us, seeing two text boxes and a “login” button is all we need to play McGyver, but the average user often needs those “Username:” and “Password:” labels to know what to enter.

A common solution to this problem is to use javascript to show and hide “hints”. This is one of those tasks that has a dozen different (perfectly acceptable) methods, and everyone tends to stand behind their choice as boldly as they do their favorite presidential candidate. I’ve tried a few of these methods, but because I tend to do it a bit differently, I thought I’d share.

Most of the solutions out there either insert a value into the textbox or they move around a label. Inserting a value into a textbox is the most obvious/common solution and has its pros and cons, but the deal breaker is the fact that a value inserted into a password box will still display as dots/asterisks. As far as I know, you can’t dynamically change the type of an input from password to text, so that solution is out. Moving around a label tag is something I first read about on the ALA article: Making Compact Forms More Accessible. It’s an ingenious idea really, but:

  1. I usually only need to make compact login forms, so it doesn’t have to be portable across other types of forms.
  2. The area for the form typically won’t accommodate leaving the labels in place for users without javascript.
  3. Occasionally I like to use a different font for the login box hints to make it jive with a home page design.

With those things in mind, I decided to try using a background image for on the textbox instead of the label. Also, I tend to incorporate jQuery into most projects lately, so it made sense for me to write it in that - although it could just as easily be rewritten as straight Javascript if necessary.

Check out the working demo.