在HTML表单中布局的最佳方式？

Question

我想显示一个包含标记文本字段的HTML表单,如下所示:

      First Name:  [_____________]
       Last Name:  [_____________]
   Date of Birth:  [________]

我明显的方法是使用a <TABLE>并简单地将标签和文本字段放在其单元格中,但是有更好的方法,例如基于CSS的方法吗？

编辑:

1. 我正在寻找一种方法来减少HTML文件中的冗长.
2. 是的,我正在寻找标签的自动调整大小.查看有关包装标签的相关问题

Answer 1

如果您需要这些字段左侧的标签,请继续使用表格.表格不仅会在较旧的浏览器上很好地降级,而且会将标签列自动调整为其中的文本大小(假设您white-space: no-wrap在包含标签的单元格上使用,和/或 - 这是真正的异端 - 可信赖的旧nowrap属性该th标签),他们处理正在取得相当狭窄的很好,他们很容易.使每个标签单元成为标题,每个字段单元为正常单元.这是一个痛苦,但要确保标签真的是labels并链接到他们的字段,因为可访问性很重要,即使(或许特别是如果)你在非语义上使用表.

我很想知道CSS解决方案可以自动调整标签列的大小,处理得很窄,并且不涉及18个黑客来处理浏览器之间的不一致.我很高兴见到他们.但每当我看到(那几个)时,它仍然是一个缺口.需要填充的间隙,IMV,所以我们可以在不穿运动衫的情况下停止这样做.

对于那些不需要左侧标签的人来说,请查看jball的答案,以获得一个好看的语义替代方案.

Answer 2

就可用性而言,如果垂直空间不是限制因素,则每个字段上方带有标签的字段列表是最快阅读和填写的,并且可以在美学上完成.有关更多信息,请参阅网络上的许多可用性研究,例如.http://www.lukew.com/resources/articles/web_forms.html

Answer 3

我想使用定义列表(<dl>),它们往往在语义上是正确的.标签由用户输入定义.这对我有意义. <dl>比表更准确地表达语义内容.

<dl>
    <dt><label for="name>Name</label></dt>
    <dd><input type="text" id="name" /></dd>

    <dt><label for="email>Email</label></dt>
    <dd><input type="text" id="email" /></dd>
</dl>

这是一个例子

顺便说一句,它们在所有浏览器中优雅地降级,甚至基于文本.

Answer 4

我认为这样的事情就是我所做的,但也不会自动调整到文本的长度,但在我看来它更干净

<form>
  <label for="firstName">First Name</label>
  <input type="textfield" name="firstName" />

  <label for="lastName">Last Name</label>
  <input type="textfield" name="lastName" />
</form>

label {
  float:left;
  width:30px;
}

input {
  float:left;
  margin-left:30px;
}