在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
• 灵活性

如果你查看css,label元素将被清除(并向左浮动).这意味着标签将与其他人一起浮动,input但每一个都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}

我们得到了

它真的很简单:)

使用这个概念,您可以创建大量的可能性,您将永远不必再使用表格进行布局!

Answer 2

使用<label>字段标签的实际元素,这也有利于可用性,并使用CSS适当地设置它们.

例如,

<label for="name">Name</label> <input type="text" name="name">

然后在你的CSS中,你可以设置LABEL元素的样式,例如,display:block你想要的宽度和适当的clear值.

对于tickbox/radio输入,输入本身应该在<label>元素内部- 这意味着标签本身应该是可点击的以选择该输入,例如:

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

Answer 3

可以认为表格是表格数据,因此表格是可以接受的.正如David所说,他们的主要问题是你想使用正确的LABEL标签.

在你的例子中,我不确定你在CSS上使用表格会得到什么.

Answer 4

“最佳实践”是使用表格来实现其用途（表示数据），并使用 div、span 或其他元素的组合来设置输入表单的样式。