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

Question

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

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

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

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

Answer 1

这篇A List Apart 文章正是这样做的。

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

有关具有灵活尺寸的解决方案，请参阅流体输入元素。

Answer 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>