I’d say to get some ideas, go to some forms on the web that do just that and see what you like.
I looked around for forms with top-aligned labels and found that a lot of the big guys still use tables for their forms. E.g. Apple’s mobileMe sign-up form looks good, but uses tables (https://secure.me.com/wo/WebObjects/Signup.woa). The big travel sites seem to use a mix of tables or lots of divs , e.g. Lufthansa, hotels.com, expedia. Ebay’s sign-up form is table-free (not too pretty, but straightforward) and I really like their error handling.
I’d say go for table-free like Ebay, but make it look good like mobileMe.
I haven’t been able to look at your attachment because it wasn’t approved yet.
Instead of fieldset label I should probably say fieldset legend.
The label “Name” in your form is not the label for a form field, so it functions more as the legend for the fieldset First Name, MI, Last Name, Suffix. On the next line, in the same position, we see the textbox label “E-mail Address”. It should be above the textbox, like all other form field labels. Same for Home Telephone and Alternative Phone (notice another inconsistency here, Telephone vs. Phone), both are textbox labels and should be above the textbox, not next to it.
Which leaves the following fieldset legends for your form: Name, Physical Address, Mailing Address, and maybe add Contact Info at the bottom of the form (which could group your e-mail and phone fields). Especially if the e-mail address is not required in your form, you can probably move it to the bottom and collect the required info first.
The screen capture that you see attached was given to me as a guide - I need to see if I can deviate from it for usability sake.
noonnope - As soon as I get a chunk of the code done - I will send it forth. It might be a week.
Mel - How can you tell the difference with this comment? “Your left column is a mix of fieldset labels (e.g., Name) and field labels (e.g., E-mail Address).” I’m not quire following.
Thanks! I’m actually getting excited about offering them a better solution.
Ok, your attachment has been approved and I was able to take a look. I know that the implementation is quite important, but even more important (and that’s what Apple got right for sure) is the usability of the form. After all, the users don’t care whether the form is built with or without tables.
Some things on the form struck me as having room for improvement:
Your left column is a mix of fieldset labels (e.g., Name) and field labels (e.g., E-mail Address). I would not mix the two, neither would I put the “required” asterisk on the fieldset labels. As an example, see this form that uses both consistently: http://www.lukew.com/ff/entry.asp?579 (except that red is not a good label color since it interferes with the error messages).
Checkbox for mailing address would probably work better before the label
Make sure your row spacing is consistent, I don’t see a good grid alignment of your form fields and fieldsets at this point.
#1 - That really surprised me to see apple using Tables. Of course - they may know something I don’t or they may not! :^)
#2 - Thanks for pointing out the examples. I think I get so heck-bent on finding a “credit app” example - I lose track of the fact there are a gazillion examples out there that serve the same purpose.
#3 - I think I am going to do all div’s again.
#4 - I’m a one person shop - so I rely on finding good information when faced with a task that is not in my core skill set.
#5 - I’m amazed that there isn’t a definitive answer out there for this circumstance. Or that a company hasn’t taken a shot at publishing a “definitive” answer.
Again - thanks for the help. I don’t know if my attachment has been approved yet - but if anything comes to light after seeing it - feel free to comment.
