制作 Web 表单的最佳实践答案

【问题标题】：Best practice for making web forms制作 Web 表单的最佳实践
【发布时间】：2010-01-30 04:15:47
【问题描述】：

可以使用表格制作网页表单还是应该使用 div？我知道如何使用表格，但是我应该如何使用 div 制作表格，还是使用表格更好？

<form method="post">
    <table>
        <tr>
            <td>
                <label for="username">Username:</label>
            </td>
            <td>
                <input type="text" name="username" id="username"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="password">Password:</label>
            </td>
            <td>
                <input type="password" name="password" id="password"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="cancel" value="Cancel"/>
            </td>       
            <td>
                <input type="submit" name="send" value="Send"/>
            </td>
        </tr>
    </table>
</form>

可能重复： Why-not-use-tables-for-layout-in-html

【问题讨论】：

这已经被打死了。难道你不能在这里..或任何地方搜索“divs vs tables”，就此而言..在发布之前？
Why not use tables for layout in HTML?的可能重复

标签： html forms

【解决方案1】：

不要使用表格，这是一个非常 brittle，非semantic 的布局，使用正确的 CSS 布局。下面是一些演示文稿，解释了表单布局的一些好方法，包括可用性注意事项。第一个链接更多关于代码，第二个更多关于设计和可用性考虑：

【讨论】：

有充分的理由使用基于 div 的布局，但它们方式比表格更脆弱。跨浏览器的表格更加可预测、可控和一致。
@Draemon：我不同意，例如，如果您将标签放在输入的左侧，并被要求将它们放在输入上方，那么您需要重建整个表格，这是一个巨大的皮塔饼。使用 CSS，您可以进行一行更改，然后就完成了。
如果你被要求把它们放在右边？还是在下面？通常，您不能仅在 CSS 中进行此类布局更改。如果您的源文件格式合理，则在任何体面的编辑器中重新排列都需要 2 分钟，无论使用哪种方法，绝对不是“巨大的 PITA”。
我非常同意 RedFilter。我们建立了许多具有大量表单的网站，并且我们所有的布局都是基于 CSS 的。 CSS 更加灵活。表格对于新手来说更容易理解和使用，但大多数真正的 html 专业人士都使用基于 CSS 的布局。

【解决方案2】：

遵守规则：只使用表格来显示表格数据。

这对我来说一直很有效......

【讨论】：

表格不只是表格数据，其中一些单元格/字段供您填写吗？
嗯.. 要么接受，要么放弃，我只是说它对我来说总是很有效:)
澄清一下——我不认为表格是表格数据。
表格表示重复业务数据类型，例如客户。一个表有许多客户对象。名称-值对是一种视图（可能是视图模型）数据类型，而不是业务数据类型。
@Draemon NO 表格不是表格数据，表格就是表格。它们用于数据收集和用户输入，这与实现现有信息的有组织显示非常不同。

【解决方案3】：

在我看来，绝对最好的表单格式是在带有标签的字段集中使用无序列表。无论如何，这是语义上最正确的方式：

<form method="post" action="foo.php">
    <fieldset>
        <legend>Some fields</legend>
        <ul>
            <li>
                <label for="foo">Foobar</label>
                <input type="text" name="foo" id="foo" />
            </li>
        </ul>
    </fieldset>
</form>

字段集不是强制性的，但可以使原本沉闷的表单变得生动起来。让ul 看起来像一个表单的基本 CSS 可能是这样的：

form ul {
    list-style: none;
    margin: 0;
}

form ul li {
    margin-bottom: 10px;
}

form ul li label {
    display: block;
    float: left;
    width: 150px;
    line-height: 24px;
}

【讨论】：

如果/当有多个列时，这不会变得尴尬（或失去一些优雅）吗？
表单不应该有多个列，这对用户不是很友好。不过，您可以轻松地将多个输入彼此相邻，例如名字和姓氏。
请告诉我的客户“表单不应该有多个列”。哈！
@Diodeus - 是的，你可以把马牵到水边，但你不能让它思考。 :)

【解决方案4】：

对于一般的最佳 HTML/CSS 实践，我建议查看A List Apart。关于表格，这里有一篇适合你的文章：Prettier Accessible Forms。对于其他示例，只需 google 关键字"semantic html form"。

【讨论】：

A List Apart 可以说是关于 Web 设计最佳实践的最佳博客。很棒的资源！也不错的链接。感谢分享。

【解决方案5】：

在 HTML 中没有这样的硬性规则或更好的方式来处理表单。如果你想简单地使用 div，最好选择一个 CSS 框架来让事情变得简单，比如blueprint

【讨论】：

【解决方案6】：

表格不用于布局，表格用于数据周期，css是要走的路，这是最佳实践。

【讨论】：

我同意。表格永远永远不会用于布局。它们仅用于轻松显示可能需要以表格或网格样式排列显示的数据。即便如此，我们有时也会为此使用 CSS。虽然掌握 CSS 需要一点努力，但非常值得。