HTML columns or rows for form layout?
- by Valera
I'm building a bunch of forms that have labels and corresponding fields (input element or more complex elements).
Labels go on the left, fields go on the right. Labels in a given form should all be a specific width so that the fields all line up vertically.
There are two ways (maybe more?) of achieving this:
Rows: Float each label and each field left. Put each label and field in a field-row div/container. Set label width to some specific number. With this approach labels on different forms will have different widths, because they'll depend on the width of the text in the longest label.
Columns: Put all labels in one div/container that's floated left, put all fields in another floated left container with padding-left set. This way the labels and even the label container don't need to have their widths set, because the column layout and the padding-left will uniformly take care of vertically lining up all the fields.
So approach #2 seems to be easier to implement (because the widths don't need to be set all the time), but I think it's also less object oriented, because a label and a field that goes with that label are not grouped together, as they are in approach #1. Also, if building forms dynamically, approach #2 doesn't work as well with functions like addRow(label, field), since it would have to know about the label and the field containers, instead of just creating/adding one field-row element.
Which approach do you think is better? Is there another, better approach than these two?
