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.
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
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:
- I usually only need to make compact login forms, so it doesn’t have to be portable across other types of forms.
- Occasionally I like to use a different font for the login box hints to make it jive with a home page design.
Darragh G (Seachmall)
I normally just display a styled alt under the box via JS/CSS but that way seems alot smoother, very nice.
Ugly inline example, works in FF, not in IE.
<input type="text" value="Password Here" onclick="this.type='password';this.value='';">
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.
Thanks for this. Very helpful.