I'm using the labelOver plugin that I found here to add a label to describe what the textbox is for. I'm capturing large amounts of data from the user (all of the properties of their house) and trying to make the form more efficient. Inline labels look great - but when the user is editing the form and the data is already populated, currently the label is hidden. I love the inline look and don't want to just display the label outside of the textbox. Any ideas on how to efficiently show the label? I'm thinking that some of type of mouseover effect is in order - but I'd love to find a classier display.

For example,

Fields: price = $100,000 sq. ft = 1800 land = 1 acre year built = 1999 ... When they are a new user, they see the labels inline of the text box (like the search box on doctype): price sq. ft land year built When the form is populated they see: $100,000 1800 1 acre 1999 ...

Fields like price are fine because it's clear what that represents, but there are 100+ fields that would not be clear, # of baths, # of bedrooms, etc. Thanks for the help!

3 answers


Honestly, I wouldn't. You're just asking for trouble.

Forms with self-labeled fields become unusable very fast. Personally, I usually use them in two scenarios:

  1. If it's fairly obvious what the fields are even without the label. An example of this is a pair of username/password fields. It can also work with a search field, assuming the button has a nice label ("search" instead of "submit") or an icon of something searchy.

  2. If I'm providing additional hints for a text field that doesn't meet criteria 1. An example might be the expected formatting for a date or phone number field, i.e. mm/dd/yyyy. Note that in this scenario, the inline label is used in addition to the regular label.

Since you have 100+ fields, I'm going to assume your form doesn't fall into either of these categories. My suggestion is to stick with traditional labels.

Answered over 8 years ago by Justin Hileman
  • I agree too. +1 o.k.w over 8 years ago

I think the "label over input" design pattern is nice for very short forms. (e.g. search, login, anything-less-than-three-fields) I don't think its a viable model for longer, more complex forms for the very reason that you're led to pose your question.

Answered over 8 years ago by Dwayne Anderson
  • I'm starting to think that label over input won't work for this form. Anyone have any good resources on best practices for displaying lots of form data to a user? Matt Cook over 8 years ago
  • You could/should group the fields using fieldset/legend. And if it is too much for one page, you could always paginate. Don Zacharias over 8 years ago

Looks like now you can have the best of both worlds... http://www.csskarma.com/lab/slidinglabels/

Answered over 8 years ago by Dwayne Anderson
  • +1 This is a really pretty solution. Matt Cook over 8 years ago