HTML columns or rows for form layout?

Question

I create a bunch of forms that have labels and corresponding fields (input element or more complex elements).

Labels go to the left, fields go to the right. Labels in this form must have a certain width so that all fields are vertical.

There are two ways (perhaps more?) To achieve this:

• Strings . Place each label and each field on the left. Put each label and field in the div / container field. Set the label width to a specific number. With this approach, labels in different forms will have different widths, since they will depend on the width of the text in the longest label.

• Columns Put all the labels in one div / container that fits on the left, put all the fields in another floating left container with padding-left set. Thus, labels and even the label container do not need to set their width, because the column layout and padding-left will equally take care of the vertical alignment of all 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 is also less object oriented, because the label and the field that comes with this label are not grouped together , because they are in approach number 1. In addition, if the construction of forms is dynamic, approach No. 2 also does not work with functions such as addRow(label, field) , since it should know about the label and containers of the fields, and not just create / add one element of the field string.

Which approach do you think is better? Is there a different, better approach than these two?

Answer 1

Approach # 1 is much better for a number of reasons, mainly related to flexibility and other issues mentioned by Kevin Bush, plus your own points regarding dynamic creation.

I would not recommend not containing elements - even if it is possible - you can give up on yourself as an additional force regarding filling, positioning, and overflow handling. It also makes dynamic creation more complex.

Your arguments for going with approach # 2 should also not be useful, given that you can set the same width for your shortcut container in your css - through the class - and this can easily be changed or designed to be responsive. This basically means that you only have one place to resize shortcuts.

Also C # 2, while your horizontal layout of labels is more automatic - the vertical layout will become more manual and complex, given that you will need to provide the label and field containers of the same height for alignment (since they could not rely on the mutant's parent). I would suggest that you will have more rows than columns, so this will just add work;)

CSS

 .field-row { overflow: hidden; } .field-row label { display: block; width: 30%; float: left; } .field-row .field-container { width: 70%; float: left; } 

Markup:

 <div class="field-row"> <label>Label Text</label> <div class="field-container"> <input type="text" /> </div> </div> 

I would probably go for it higher, as this will cover most of what I have ever needed, however, if you need more control over the possible changes that may occur in your application, you can do the following:

css 2:

 .field-row { overflow: hidden; } .field-row .label-container { width: 30%; float: left; } .field-row .field-container { width: 70%; float: left; } 

markup 2:

 <div class="field-row"> <div class="label-container"><label>Label Text</label></div> <div class="field-container"> <input type="text" /> </div> </div> 

Just by adding one extra shell, you then allow you to use more complex labels (i.e. hide text and replace with images or add explanatory text with js) - you also give yourself more control with respect to center or right alignment.

Anyway, just my thoughts :)

Answer 2

None. You do not need to do this with CSS-containing divs. For instance:

 <style> form { width: 28em; margin: 5px; padding: 5px; border: solid #000 1px; } label { width: 6em; float: left; text-align: right; margin: .5em 1em; clear: both; border: dashed #666 1px; } input, textarea { margin: .5em 0; width: 17em; } </style> <form> <label for="first">First Name:</label> <input type="text" name="first_name" id="first" size="20" maxlength="50" /> <label for="last">Last:</label> <input type="text" name="last_name" id="last" size="20" maxlength="50" /> </form> 

http://jsfiddle.net/k4xEG/

Answer 3

Strings using only div. jsFiddle here: http://jsfiddle.net/v7R8j/1/

HTML:

 <form> <div class="label">Type text:</div> <div class="field"><input type="text"/></div> <div class="clear"></div> <!-- ... --> <div class="label">Submit button:</div> <div class="field"><input type="submit"/></div> <div class="clear"></div> </form> 

CSS

 .label { width: 150px; } .field, .label { float: left; border: 1px solid orange; padding: 4px; margin: 4px; } .clear { clear:both; }