HTML表单中的最佳布局方式？ [英] Best way to layout in HTML forms?

问题描述

我要显示包含标签文本字段的HTML表单，如下所示：

I want to display an HTML form containing labelled text fields, like this:

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

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

My obvious approach is to use a <TABLE> and simply place the labels and text fields in its cells, but is there a better way, e.g. a CSS-based approach?

编辑：

1. 我在寻找一种减少冗长程度的方法


2. 是的，我正在寻找自动调整标签的大小。有关包装标签的相关问题，请参见相关问题

1. I'm looking for a way that reduces the verbosity in the HTML file.
2. And yes, I'm looking for auto-sizing of the labels. See a related question about wrapping labels

推荐答案

如果你需要这样的字段左边的标签，只需继续使用表格。不仅表格在旧版本的浏览器上降级很好，而且它们会自动调整标签列的大小（假设你使用 white-space：no-wrap 包含标签的单元格和/或< mdash;这是真正的异端< code> th nowrap 属性$ c> tag），它们处理得相当窄，很容易。使每个标签单元格为标题，每个字段单元格为正常单元格。这是一个痛苦，但确保标签真的是标签 s并链接到他们的字段，因为无障碍重要，即使（特别是如果）你使用表非语义。

If you need the labels to the left of the fields like that, just go ahead and use a table. Not only do tables degrade nicely on older browsers, but they auto-size the column of labels to the text in them (assuming you use white-space: no-wrap on the cells containing the labels, and/or — and this is true heresy — the trusty old nowrap attribute on the th tag), they handle being made fairly narrow well, and they're easy. Make each label cell a header and each field cell a normal cell. And it's a pain, but make sure the labels really are labels and link to their fields, because accessibility matters, even if (perhaps especially if) you're using a table non-semantically.

我很想听听CSS解决方案的自动调整标签列，处理狭窄，不涉及18 hack处理跨浏览器不一致。我很高兴见到他们。但每次我看过（这是几个），它仍然是一个差距。需要填充的缺口，IMV，所以我们可以停止这样做而不穿衬衫。

I'd love to hear about CSS solutions that auto-size the label columns, handle being narrow well, and don't involve 18 hacks to deal with inconsistencies across browsers. I'd be thrilled to see them. But every time I've looked (and that's several), it's still been a gap. A gap that needs filling, IMV, so we can stop doing this without wearing hairshirts.

对于任何阅读不到左边，请查看 jball的回答一个好看的，语义的选择。

For anyone reading who doesn't need the labels to the left like that, check out jball's answer for a good-looking, semantic alternative.

这篇关于HTML表单中的最佳布局方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！