html中表单布局的最佳实践——表格还是流？

Question

在 html 中布局表单的最佳做法是什么？特别是您有一组带有标签的字段和可能的错误指示符。我能做的最好的就是使用表格，但这在面向 css 的布局设计中效果不佳。例如：

<table>
  <tr>
    <td>Name:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="NameError">*</td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="PhoneError">*</td>
  </tr>
  <tr>
    <td>Birthday:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="BirthdayError">*</td>
  </tr>
</table>

这似乎不是很 CSS，但我不确定如何使用面向 css 的布局来使其正常工作。

什么是最佳实践？

Answer 1

我不了解你们，但我不会在表单布局中使用太多标记。

这是一个简单登录表单的标记（没有布局标记，即 div、表格等）

<form method="post">
    <label>Username</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <input type="submit" name="Log In" />
</form>

这是表单的 CSS

label,input{float:left}
label,input[type="submit"]{clear:left}

这是结果

令人惊奇的是：

• 缺少标记
• 缺少 CSS
• 灵活性

如果您查看 css，label 元素正在向左清除（并向左浮动）。这意味着标签将与它的同伴inputs 一起浮动，但是每个label 将是一个新行。

这使得添加额外输入变得非常容易。甚至输入后的验证消息

以这个表格为例

<form method="post">
    <label>Name</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <label><abbr title="Date of Birth">D.O.B.</abbr></label>
    <input type="text" name="dob_day" />
    <input type="text" name="dob_month" />
    <input type="text" name="dob_year" />

    <input type="submit" name="Log In" />
</form>

有了这个 CSS

label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}

我们得到

真的就是这么简单:)

使用这个概念，您可以创造大量的可能性，而且您再也不用使用表格进行布局了！

Answer 2

使用实际的 <label> 元素作为字段标签，这对可用性也有好处，并使用 CSS 适当地设置它们的样式。

例如，

<label for="name">Name</label> <input type="text" name="name">

然后在您的 CSS 中，您可以为 LABEL 元素设置样式，例如 display:block 和您想要的宽度，以及适当的 clear 值。

对于复选框/单选输入，输入本身应位于 <label> 元素内 - 这意味着标签本身应可单击以选择该输入，例如：

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

Answer 3

可以说表格是表格数据，所以表格是可以接受的。正如大卫所说，他们的主要问题是你想使用正确的标签标签。

不过，在您的示例中，我不确定您从使用 CSS 表格中获得了什么。

Answer 4

最佳实践 = 切勿使用表格进行布局。

您可以尝试 CSS 框架，例如蓝图我们的 960 网格系统。

Answer 5

“最佳实践”是使用表格来完成它的用途 (represent data)，并使用 div、span 或其他元素的组合来设置输入表单的样式。

Answer 6

在此处发布我对您的后续问题的回答，因为它可能会作为重复而被关闭。

我不确定浏览器对此的支持有多好，在 FF4 中测试：http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

是的，我知道，我刚刚使用 div 创建了一个表格。但关键是这很容易访问并且在语义上是正确的。

编辑：在 IE7 中惨遭失败，其中固定宽度是唯一的方法，但 8 和 9 似乎没问题。

Edit2： 切换标签/字段并设置右对齐：http://jsfiddle.net/shanethehat/7h3bC/12/。在这一点上，标记变得有点沉重。 :first-child 可以替代使用 left 类，但代价是 IE8。