Designing a form with CSS


I need to design a credit application. The layout is fairly strict.

However - I am having a hard time trying to find resources to read as to how to best design it.

I purchased Fancy Form Design today - but it only dealt with single column forms.

For the form I need - just to give an example -
1 - Line ONE needs to contain text boxes for First Name, MI, Last Name, and Suffix.

2 - The labels need to appear above each box.

3 - Line TWO contains text boxes for Address 1 and Address 2 right next to one another with their labels above each text box.

So as you can see - it’s not a single column, everything aligned left, form.

I have attached an example.

I want to build this form using the best method - I just don’t know what the best way is.

I have built forms using DIV’s for containing everything - I have seen forms built using SPANS for containing everything.

If I use DIV’s - I can float everything left and use varying widths to get the various elements to sit on the same line. But is that the best way?

Looking for advice at this point. Trying to do the job right.

Any advice is appreciated! Thanks!

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 ( The big travel sites seem to use a mix of tables or lots of divs , e.g. Lufthansa,, 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.

give us the markup and we’ll try each our own way. maybe you will find at least some to be of some help :slight_smile:

tables are an easy option, but there are others. matter of personal choice and development skills.

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.

Let me read and absorb your responses.

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:

  1. 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: (except that red is not a good label color since it interferes with the error messages).
  2. Checkbox for mailing address would probably work better before the label
  3. 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.

Thanks again!