Textbox Hints

Update 6/4/09: I just wrote a new blog post about using the title attribute as the hint text. The method described below is still practical for some forms, but using the title text is a more practical and widely-applicable method of providing textbox hints. Check out the new post.

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.

5 comments on “Textbox Hints

Darragh G (Seachmall) says:

I normally just display a styled alt under the box via JS/CSS but that way seems alot smoother, very nice.

Ove says:

Nice one.

The sorry thing is that there is support to do this dynamically (changing the TYPE attribute value), but for some reason IE just won’t comply. I think it’s getting confused and mixes up TYPE in Javascript and the DOM.

Ugly inline example, works in FF, not in IE.
<input type="text" value="Password Here" onclick="this.type='password';this.value='';">

Ken Seals says:

Very nice. I get to play with forms pretty much every day.. I’ll definitely be making use of this. Thanks, man!

One bit that caught my eye is using display: none to hide the labels. It might be better to throw it off screen with absolute positioning and a negative margin or something, as some screen readers will actually take into account display: none and hide the label from visually impaired users.

@Ove: Yea, defintiely tried that. Don’t you just love IE.

@Ken: I thought about that but in an attempt to keep the css pretty simple I just display noned it. I’ll update the example tonight.

Raina Gustafson says:

Thanks for this. Very helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to the top!