用于表单布局的HTML列还是行?

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.

行:浮动每个标签和每个字段。将每个标签和字段放在字段行div/容器中。将标签宽度设置为特定的数字。使用这种方法，不同表单上的标签会有不同的宽度，因为它们将取决于最长标签中文本的宽度。
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.

列:把所有标签在一个div容器/提出离开,把所有字段在另一个浮动容器的左侧padding-left集。这种方式甚至标签和标签容器不需要他们的宽度设置,因为列布局和padding-left均匀照顾垂直排列的所有字段。

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.

因此，方法2似乎更容易实现(因为宽度不需要一直设置)，但我认为它也不那么面向对象，因为与该标签相关的标签和字段没有按照方法1分组。另外，如果动态构建表单，那么对于addRow(label, field)之类的函数，方法#2就不能很好地工作，因为它必须了解标签和字段容器，而不是仅仅创建/添加一个字段行元素。

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

你认为哪种方法更好?还有比这两个更好的方法吗?

3 个解决方案

#1

Approach #1 is the far better for a number of reasons, mainly pertaining to flexibility and the other points mentioned by Kevin Boucher, plus your own points with regard to dynamic creation.

方法1要好得多，原因有很多，主要是关于灵活性和Kevin Boucher提到的其他要点，以及您自己关于动态创建的观点。

I wouldn't recommend not having containing elements - even though it is nicely possible - you deny yourself a lot of extra power with regards to padding, positioning and overflow handling. It also makes dynamic creation more tricky.

我不建议不要包含元素——尽管这是很有可能的——您在填充、定位和溢出处理方面给自己增加了很多额外的功能。这也使得动态创建更加棘手。

Your arguments for going with approach #2 also need not be a benefit either, considering you can set one width for your label container in your css - via a class - and this can easily be changed or designed to be responsive. Basically meaning you only have one place again to change your label dimensions.

考虑到您可以在css中(通过类)为标签容器设置一个宽度，并且可以很容易地更改或设计为响应性，所以您支持使用方法#2的理由也不一定是有益的。基本上就是说你只有一个地方来改变你的标签尺寸。

Also With #2, whilst making your horizontal label layout more automatic - vertical layout would become more manual and tricky considering you would have to give your label and field containers the same height in order to line up (as they couldn't rely on a mutal parent). I'd make a guess that you'll have more rows than columns so this would just add work ;)

同样对于#2，当使你的水平标签布局更自动的时候——垂直布局会变得更加手工和棘手，因为你必须给你的标签和字段容器相同的高度来排列(因为他们不能依赖于一个mutal父类)。我猜你会有更多的行而不是列所以这只会增加功;)

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'd probably go for the above myself as that would cover most of what I've ever needed, however if you wanted more control with regard to possible future changes that might occur in your app, you could 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:

标记2:

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

By just adding one extra wrapper you then allow for the ability of more complicated labels (i.e. hiding the text and replacing with images, or adding explanatory text with js) - you also give yourself more control with regards to center or right alignment.

通过添加一个额外的包装器，您就可以使用更复杂的标签(例如隐藏文本并用图像替换，或者使用js添加解释性文本)——您还可以对中心或正确对齐进行更多的控制。

Anyway just my thoughts :)

总之，我的想法是

#2

Neither. Do it with CSS - containing divs are unnecessary. For example:

既不。使用包含CSS的div是不必要的。例如:

<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/

#3

Rows approach using only div's. jsFiddle here: http://jsfiddle.net/v7R8j/1/

行方法只使用div。jsFiddle:http://jsfiddle.net/v7R8j/1/

HTML:

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:

CSS:

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

.clear {
    clear:both;   
}

#1