在 HTML 中插入表单的正确方法是什么，使其字段标签与输入字段的距离相等？答案

【问题标题】：What would be the correct way to insert a form in HTML, in such a way that it's field labels are equally distanced from the input field?在 HTML 中插入表单的正确方法是什么，使其字段标签与输入字段的距离相等？
【发布时间】：2013-04-18 14:57:09
【问题描述】：

以前我一直在使用<table> 标签来构造一个表单，这样我们就可以得到一个很好的格式化表单，这样每个标签和字段就可以彼此在线，如下所示：

Email:       [############]
Password:    [############]

但是这里存在语义问题，表单并不完全是表数据。因此，在表格适合图形的地方，它不在语义级别上。

什么是构建表单的正确方法，以便它在数据类型方面图形上令人愉悦并且在语义上正确？

【问题讨论】：

标签： html css w3c

【解决方案1】：

这个A List Apart article 就是这样做的。

它使用语义正确的标签和 CSS 样式来构建具有稳定边距的无表格表单。简而言之，它使用label标签来显示文本，并赋予它们固定的宽度以使表单域从相同的水平位置开始。

有关灵活尺寸的解决方案，请参阅Fluid input elements。

【讨论】：

表格确实提供的唯一问题是，如果您希望它自动调整大小，而不是固定宽度。
@netbrain 是的，表格提供了一些无法用 CSS 复制的独特布局功能（除了 IMO 非常愚蠢的display: table 解决方法）。灵活的宽度可以通过 CSS 完成，这应该可以满足您的需求：Fluid input elements

【解决方案2】：

尝试使用<fieldset>，然后自定义 CSS 以获得更好的外观。

<fieldset>
    <legend>Login</legend>
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
    <br />
</fieldset>

【讨论】：