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

Question

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

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

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

编辑:

1. 我正在寻找一种减少 HTML 文件冗长的方法。
2. 是的，我正在寻找自动调整标签大小的功能。查看 related question about wrapping labels

Answer 1

如果您需要这样的字段左侧的标签，请继续使用表格。表格不仅在旧浏览器上可以很好地降级，而且它们会根据其中的文本自动调整标签列的大小(假设您在包含标签的单元格上使用 white-space: no-wrap，并且/或——这是真正的异端——th 标签上值得信赖的旧 nowrap 属性)，它们处理得很好，而且很容易。使每个标签单元格成为标题，使每个字段单元格成为普通单元格。这很痛苦，但请确保标签确实是 label 并链接到它们的字段，因为可访问性很重要，即使(可能尤其是如果)您使用的是非语义表。

我很想听听 CSS 解决方案，它可以自动调整标签列的大小，很好地处理变窄，并且不涉及 18 种 hack 来处理浏览器之间的不一致。我会很高兴见到他们。但每次我看过(那是几次)，它仍然是一个差距。一个需要填补的空白，IMV，这样我们就可以不用穿毛衣就停止这样做。

对于那些不需要需要像这样在左边添加标签的阅读者，请查看 jball's answer一个好看的语义替代品。