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}

结果如下

The rendered result of the above HTML and CSS

令人惊讶的是：

缺少加价
缺乏CSS
灵活性

如果查看css，label元素将被清除（并向左浮动）。这意味着标签将与其input个人一起浮动，但每个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}

我们得到了

The rendered result of the above HTML and CSS

真的很简单：）

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

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

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

在你的例子中，我不确定你在CSS上使用表格会得到什么。

Answer 4

“最佳实践”将使用表格来表达它的意图（represent data），并使用div，span或其他元素的组合来设置输入表单的样式。

Answer 5

最佳实践=绝不使用表格进行布局。

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

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。

html中表单布局的最佳实践 - 表或流程？

6 个答案: