html - 布局和设计表单的标准 (HTML/CSS)

Question

Web 开发的一部分(从前端的 Angular 来看)是布局表单。从来没有标准集，我看到人们继续使用 <tables>保持样式一致。假设您要布置此表单:

乍一看，表格似乎可以轻松布置此表单。另一种选择是使用 <fieldset>的，里面可能有一个列表。将字段集 float 到左侧，给它们相等的宽度。

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

您会怎么做？为什么？

Answer 1

我必须说，最常用的方法是使用表格。不幸的是，基于表格的表单布局存在问题(大惊喜)。一件大事是表格会溢出它们的容器(如果没有 overflow hidden )并且它们不会像 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 文档(可维护性)，而且我相信网络浏览器会更快地呈现 CSS 方法。

更新 1:I also found a CSS method using unordered lists .

更新 2:@musicinmyhead 提醒我在 CSS 表单布局中使用 fieldset 和 legend 标签。我为我们编写了一个快速而肮脏的小演示 ​​here .

注意:我最初是从以下位置了解到这种纯 CSS 表单布局的:http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/