html - html 中表单布局的最佳实践——表格还是流程？

Question

在 html 中布局表单的最佳实践是什么？特别是在您有一组带有标签和可能的错误指示符的字段的地方。我能做的最好的就是使用表格，但这在面向 css 的布局设计中效果不佳。例如:

<table>
  <tr>
    <td>Name:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="NameError">*</td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="PhoneError">*</td>
  </tr>
  <tr>
    <td>Birthday:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="BirthdayError">*</td>
  </tr>
</table>

这看起来不太像 CSS，但我不确定如何使用面向 css 的布局来使这项工作正常进行。

什么是最佳实践？

Answer 1

我不了解你们，但我并没有在表单布局中使用太多标记。

这是一个简单的登录表单的标记(没有布局标记，即 div、表格等)

<form method="post">
    <label>Username</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <input type="submit" name="Log In" />
</form>

这是表单的 CSS

label,input{float:left}
label,input[type="submit"]{clear:left}

这是结果

最神奇的是:

• 缺少标记
• 缺少 CSS
• 灵 active

如果您查看 css，label 元素将向左清除(并向左浮动)。这意味着该标签将与其同伴 input 一起 float ，但是每个 label 都将是一个新行。

这使得添加额外输入变得非常容易。输入后甚至验证消息

以这种形式为例

<form method="post">
    <label>Name</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <label><abbr title="Date of Birth">D.O.B.</abbr></label>
    <input type="text" name="dob_day" />
    <input type="text" name="dob_month" />
    <input type="text" name="dob_year" />

    <input type="submit" name="Log In" />
</form>

使用这个 CSS

label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}

我们得到

真的就是这么简单:)

使用这个概念，您可以创造出大量的可能性，而且您再也不必使用表格进行布局了!