Form Layout
February 22nd, 2007 by michael
I’ve looked at quite a lot of examples of form layout over the past two years. Invariably the demonstrations looked very pretty and were pretty primitive. Usually, all the input elements are lined up in a single column; labels are either stuck on top of the inputs or prepended to them. This is all well for simple forms or a succession of forms chained together in wizard-style. It is less appealing for web-based applications targetted at proficient users who interact with them frequently.
Ground Rules
- Tables only where they are semantically meaningful.
- As much independence as possible from specific window or font sizes.
- Efficient use of available space.
- Horizontal and vertical alignment to columns.
For those with impaired browsers, here’s what it looks like at various widths.
800 pixels
600 pixels
400 pixels
The relevant part of the boilerplate.css stylesheet isn’t even overly long.
Any scope for text explanations of validation problems?
No, not yet, unfortunately. Two reasons: I have no good idea how to integrate such messages into the layout. With a single column layout, adding messages is pretty straightforward. With multiple columns, and dynamic layout changes on top of that, I fear it results in a cluttered mess.
Also, my JavaScript validator doesn’t have built-in support for validation messages. It would be easy to add such messages in an ad hoc fashion, but that’s not what I want. Rather, I’d like to have it so that consistency between client-side validation messages and server-side validation messages is guarantied. For the validation itself this is already the case in Ruby on Rails when used with my Client Side Validation plugin. I haven’t figured out how to do this for the messages, too.