风格标签字段形式的最佳方式？

说你想用下面的布局形式风格标签字段形式的最佳方式？

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

我敢肯定，有没有比接受了几个社会上更多的做HTML/CSS这又每次都为“正确”的方式，我觉得不必风格自己类似的东西我与宽度摆弄，花车，嵌套的标签与使用for=""等

什么都好，普遍接受的（这意味着它不只是您的意见）方法创建的HTML和CSS和它具有语义上的意义，可维护性，并且可以与浏览器一起工作大小调整？

编辑： 我当然意识到，没有一种技术适用于所有情况。然而，当你开始创建一个表单时，你首先需要某种基准，一些指导 - 这是我一直无法找到的和我正在寻找的东西。

来源

2012-01-22 George Mauer

我不确定，但不能将每个标签和输入结合在一对和标签中，并且使用适当的css按照您想要的方式制作？

来源

2012-01-22 22:26:28

埃米尔，问题不是**如何做到这一点;有一百万种方法。问题是社区接受什么是正确的方式。 –

社区，就曾经有过“社区”观点而言，我认为：任何最适合你和你的用例的理想情况下，理想情况下，它不会谋杀语义。 –

@George Mauer：这似乎是结案的理由，即使你不要求***只是***个人的意见... – BoltClock

我典型地在一个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>

如果你感觉真的ambitiuos，那么随着时间的推移，你可以创建自己的“终极包” like Simon Collison，你可以用它来启动你的项目。

来源

2012-01-23 00:04:07 ryankeairns

下面的链接提供的技术是干净和语义的。

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

fieldset标签包含输入元素组。

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

然后，所有内容都通过CSS进行视觉上的调整以达到完美。

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

注：一些幻灯片的底部被裁剪。整个演示文稿可以作为OpenOffice文档下载，无需剪切。

来源

2012-01-23 00:17:30 Sparky

Twitter Bootstrap具有堆叠形式的组件，并developed as a style guide and toolkit因此它可能是最佳做法的合理的工作示例（至少对于那些特别设计，显然不适合每一个使用案例比比皆是）。

最一致的最初步实践我已经看到了创建窗体是标签标签附上两个标签和输入，以增加点击区域，从而使形式更便于使用。

来源

2012-01-23 01:18:29 ellawren

风格标签字段形式的最佳方式？

回答

相关问题