Question

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

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

我确信只有少数社区接受了“正确”的方式为此做html / css然而每当我发现自己必须设置类似于它的样式时，我正在摆弄宽度，浮动，嵌套标签vs使用for=""等

什么是好的，通常被接受（意味着它不是只是你的意见）创建html和css并使其具有语义意义，可维护性和使用方法浏览器重新调整大小？

版：我当然意识到没有一种技术可以适用于所有情况。但是，当您开始创建表单时，您会从某种基线开始，某种指导 - 这是我无法找到的以及我正在寻找的内容。

Answer 1

我通常将标签/输入组合在一个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，您可以用它来快速启动您的项目。

Answer 2

以下链接中提供的技术是干净且语义的。

label标记用于包含相应的输入元素。

fieldset标记包含输入元素组。

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

然后用CSS在视觉上调整所有内容。

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

注意：某些幻灯片的底部会被剪裁。整个演示文稿可以作为OpenOffice文档下载，不会剪切任何内容。

Answer 3

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

Answer 4

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

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

标注场外形式的最佳方式？

4 个答案: