Putting the label for a field inside the field itself seems like a good idea – it doesn’t take up any extra space on the page and there’s no question about which field a label is associated with.

BUT. If you’re going to do this, you need to make sure that the label is still visible until the person filling out the form starts to type.

If this form from Shell, the label disappears as soon as you click into the field. So if you’re tabbing through the form and not paying attention to the next field before you hit tab (which is especially difficult given that the form is in two columns), you end up with a blank field wondering what you’re supposed to type in.

The form label disappears as soon as the field becomes active... that's no good.

Also, in-field labels should not look like the actual data being entered. Usually they’re a lighter shade of grey to indicate that they’re temporary.

Here’s a good write-up from UX Movement on how to pull off putting labels inside textboxes.

This form has a few other issues as well:

  • Two columns makes it harder to scan
  • Non-normal order of address fields: Mailing Address, Postal Code, Province/Territory… where does city go?
  • Everything is mandatory except the marketing opt-in. Don’t bother with asterisks, just mark the optional field.
Categories: Bad Forms

4 Responses so far.

  1. [...] can be inaccessible even for a user who can see and use a mouse if it is badly designed. Take this form from badforms.com, for example (yes, there is a website dedicated to exposing badly designed [...]

  2. Hot Topics……

    [...]usually posts some very interesting stuff like this. If you’re new to this site[...]……

  3. jqp says:

    note that placeholders are not cross-browser compatible either. I considered using them for a cleaner appearance. After extensive testing I returned to conventional labels. In some older browsers all you’d see is the field with no label nor placeholder text

Leave a Reply



+ 3 = 9

March Madness… About ESPN’s...

Posted on Mar - 19 - 2014

0 Comment

Out of Order! Pay...

Posted on Jun - 6 - 2013

0 Comment

Labels Inside Fields… What...

Posted on Apr - 15 - 2013

4 Comments

Mandatory Optional Fields –...

Posted on Jan - 22 - 2013

0 Comment

One Of The Craziest...

Posted on Jun - 2 - 2012

2 Comments

Don’t Waste My Time...

Posted on May - 26 - 2012

4 Comments

Instructions Should Be Written...

Posted on May - 21 - 2012

1 Comment

One Of The Craziest...

Posted on Jun - 2 - 2012

2 Comments

Breaking the Rules… Or...

Posted on May - 27 - 2012

1 Comment

I Am Male. And...

Posted on May - 31 - 2012

3 Comments