Form labels
Posted: October 19th, 2009 | Author: Adrian | Filed under: Patterns, Usability fail | Tags: forms, inputs, labels | 8 Comments »DON’T put your form labels inside the inputs.
If i start writing into the input and i forget if i had to insert the username or the email address i have to delete everything, pray to god that the programmer made so the label appears again in the field once I click away, and after that complete the field again. It’s not nice.
Yeah, I have to delete that text before adding mine all the time.
Actually those labels don`t disappear when clicked. Fail.
This design violates one common people behavior – interruptions. There are SO many interruptions in real world and there is a high chance to forget what I typed 5 mins ago.
What about the implementation at Apple’s Me site? (www.me.com) When you click on the field the label actually fades a bit but doesn’t go away. It then only goes away when you start typing. I think labels inside fields are useful for forms where you only have one or two fields (e.g. a search box or a login form) where there is little room for confusion. Would you *really* forget what you should be typing in that case? I’m not so sure.
P.S. Your comments form has labels inside the fields! 🙂
this comment form violates your rule 😀
i know 🙂
do as the priest says not as the priest does…
well, i wrote this post after i had to delete the email address from the field in the picture because i didn’t know if it was the email or username, so it’s at least plausible. The me.com method it’s a little bit better but not the best.
well, i’ve done some changes to the comment form, it’s embarrassing to preach good practices when you don’t follow them.
Hi. Good point.
But certainly there is one good side to such method: it does not require labels which are usually *two, new type of items* for usual login box combination:
* username [txt input]
* password [pwd input]
* submit [button or image]
* forgot password? [link]
+ sometimes there are also:
* box title [title, hx tag]
* sign up! [link]
you see, this already consists of 4-6 elements (adding two would be quite a lot:) ) and 4-5 different types of elements (adding one would be quite a lot 🙂 )
Also, I guess that everyone who sees this combination knows what the first and second input are for.
I just felt I needed to state the “more minimalist view” on this 🙂
(I just found your blog. +1 subscription to Reader)