样式标签字段表单的最佳方式？ [关闭]答案

【问题标题】：Best way to style label-over-field forms? [closed]样式标签字段表单的最佳方式？ [关闭]
【发布时间】：2012-01-22 22:18:42
【问题描述】：

假设您想要一个具有以下布局的表单

|-----------------------------------------------------------|
| Street Address 1              Street Address 2
|  _____________________         _____________________
| |_____________________|       |_____________________|
|
| City              State                 Zip
|  ______________    ____       _____________________
| |______________|  |___^|     |_____________________|
|
|-----------------------------------------------------------|

我敢肯定，只有少数社区接受了“正确”的 html/css 方法，但每次我发现自己必须设置类似的样式时，我都会纠结于宽度、浮动、嵌套标签与使用for=""等

什么是好的、被普遍接受的（意味着它不是只是你的意见）创建 html 和 css 并使其在语义上有意义、可维护和使用的方法浏览器调整大小？

编辑： 我当然意识到没有一种技术适用于所有情况。但是，当您开始创建表单时，您会从某种基线开始，某种指导 - 这是我一直无法找到的，也是我正在寻找的。p>

【问题讨论】：

标签： css forms label standards

【解决方案1】：

下面链接中介绍的技术是干净和语义化的。

label 标签包含相应的输入元素。

fieldset 标签包含输入元素组。

ul 和li 标签逐行组织表单元素。

然后一切都在视觉上用 CSS 调整到完美。

http://www.slideshare.net/AaronGustafson/learning-to-love-forms-web-directions-south-07

注意：一些幻灯片的底部被剪裁了。整个演示文稿可以下载为 OpenOffice 文档，其中没有任何内容。

【讨论】：

【解决方案2】：

我通常将标签/输入组合在一个 div 中，然后将它们分组到一个容器（通常是一个字段集）中，该容器可以被视为一个单元。然后你可以有一致的宽度、浮动、边距等。

我还使用类来应用标签和输入的一致大小 - 想想（小、中、大）。

它可能看起来像这样：

<fieldset>
<div class="medium">
<label for="street1">Street Address 1</label>
<input id="street1" />
</div>
<div class="medium">
<label for="street2">Street Address 2</label>
<input id="street2" />
</div>
</fieldset>

<fieldset>
<div class="small">
<label for="city">City</label>
<input id="city" name="city />
...
</fieldset>

如果您真的有雄心壮志，那么随着时间的推移，您可以创建自己的“终极包”like Simon Collison，您可以使用它来快速启动您的项目。

【讨论】：

【解决方案3】：

我不确定，但你不能将每个标签和输入组合成一对和标签，并通过使用适当的 css 来制作你想要的方式吗？

【讨论】：

阿米尔，问题不在于如何做到这一点；有一百万种方法。问题是社区接受什么是正确的方式。
社区，只要有“社区”的意见，我认为：最适合您和您的用例的，理想情况下，不会破坏语义。
@George Mauer：这似乎是结束的理由，即使您不要求只是个人意见...
@DavidThomas 恕我直言（我的意思是，您的回答过去曾帮助过我），这完全是逃避任何提供指导的责任。我意识到并非所有情况都适用于所有情况，但人们开始时有一个基线。我没有一个让我满意的，这就是我正在寻找的。span>
@BoltClock - 如果有更合适的论坛，请告诉我，我认为这对于程序员 stackexchange 来说有点太具体了。我正在寻求我无法在网上轻松且令人满意地找到的指导。

【解决方案4】：

Twitter Bootstrap 有一个堆叠的表单组件并且是developed as a style guide and toolkit，所以它可能是最佳实践的一个合理的工作示例（至少对于那些特定的设计师，显然不是每个地方的每一个用例）。

我见过的创建表单最一致的最佳实践是将标签和输入都包含在标签标签中以增加可点击区域，从而使表单更可用。

【讨论】：