Question

Web开发的一部分（从前端角度来看）正在布局表单。从来没有标准集，我看到人们继续使用<tables>来保持样式的一致性。假设你要列出这个表格：

enter image description here

乍一看，似乎桌子可以轻松地布置这个表格。另一种选择是使用<fieldset>，其中可能包含一个列表。将字段集浮动到左侧，给它们相等的宽度。

我的问题是布局表单的最标准方法是什么？似乎有几种技术，但其中很多都不能跨浏览器工作。

你怎么做？为什么？

Answer 1

我必须说，最常见的方法是使用表格。不幸的是，基于表格的表格布局存在问题（大惊喜）。一个重要的事情是表格将会溢出他们的容器（如果没有隐藏溢出）并且他们不像CSS那样压缩他们的内容。最重要的是，渲染表更昂贵（占用更多的CPU周期）。总的来说，我认为，与纯CSS解决方案相比，基于表格的表单布局是僵化且不灵活的，作为设计师，我在使用表格进行布局时会感到畏缩（并且你也应该！）。

我开始喜欢的方法（并且越来越受欢迎）是用于布局表单的纯CSS2方法。我不会赞同自己提出这个想法，但它确实是直截了当的。你所要做的就是：

HTML：

<form action="process.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
</form>

CSS：

label, input {
    width:200px;
    display:block;
    float:left;        
    margin-bottom:10px;
}
label {
    width:125px;
    text-align:right;
    padding-right:10px;
    margin-top:2px;
}
br {
    clear:left;
}

正如您所看到的，CSS代码非常简洁，结果非常棒。这种方法的优点是它使用更少的代码（下载速度更快），没有所有乱糟糟的表格标签乱丢HTML文档（可维护性），它更清晰，我相信Web浏览器将更快地渲染CSS方法。

更新1：I also found a CSS method using unordered lists。

更新2：@musicinmyhead提醒我在CSS表单布局中使用fieldset和legend标记。我给我们编了一个快速而又脏的小演示here。

注意：我最初从http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

了解到这个纯CSS表单布局

Answer 2

研究表明，一栏中的字段和字段上方的标签最容易填写。 Lukew有很多形式的数据/研究/信息：

http://www.lukew.com/ff/entry.asp?504

作为奖励，这通常也是构建表示层的最简单方法。此外，它通常更加适合移动设备。

所有这一切，表格都是有效的。在许多方面，表单是部分填写的电子表格（如果您想根据表格数据进行思考）。

我通常将LABEL / FIELD对包装在div中，并根据所需的布局根据需要定位标签和字段。

Answer 3

在CSS之前使用表格作为布局的做法是有意义的，但表格实际上是用于呈现数据而不是其他内容。布局表单的最简单方法是在单个列中的字段上方标记，但是可以使用<div>元素和一些CSS创建表提供的相同网格状布局。

为此，CSS可能如下所示：

.layout-grid{
    display: table;
}

.layout-row{
    display: table-row;
}

.layout-cell{
    display: table-cell;
}

，HTML可能如下所示：

<form action="foo.php" method="post">
    <div class="layout-grid">
        <div class="layout-row">
            <div class="layout-cell">
                <label for="foo">Foo:</label>
            </div>
            <div class="layout-cell">
                <input id="foo" name="foo" />
            </div>
        </div>
        <div class="layout-row">
            <div class="layout-cell">
                <label for="foo">Foo:</label>
            </div>
            <div class="layout-cell">
                <input id="foo" name="foo" />
            </div>
        </div>
        <div class="layout-row">
            <div class="layout-cell">
            </div>
            <div class="layout-cell">
                <button type="submit">Go!</button>
            </div>
        </div>
    </div>
</form>

Answer 4

个人？一张桌子。工作中？ CSS。我随心所欲。关于这样一个事实，即一个表格本身并不是表格数据（就像一个表格的数据），这是真的，并且有一些CSS可以创建类似单元格的结构。

如果你的时间不够而且只适合桌子吗？表。接下来是CSS / cell结构，但大多数人（可能正确地）一直都说CSS。这不是太难，如果你想混合和匹配整个事情，比如说在前三个底部增加一个额外的第四个问题，它将使这一变化更快一点。不多，但有点儿。

布局和设计表格的标准（HTML / CSS）

4 个答案: