[转载]表单的CSS设计(css form design)
原文：点这里
使用 Label
![[转载]表单的CSS设计(css form design)](https://tsov.net/static/images/thumb.gif)
Label能够建立form元素与文字说明的桥梁这样点击First name文字后，就能自动激活input
Label可以用在以下一些内容
- checkboxes
radio buttons
textareas
text fields
select boxes
submit 按钮 和submit 图象 不需要使用Label，因为它们有自己的value和alt
排序相关元素
使用fieldset可以聚合一系列相关的类别，然后通过legend加以说明没用CSS修饰的fieldset和legend
表单布局
Label在表单元素的上面，可以节省横向空间
Label在表单元素的左面，左对齐
Label在表单元素的左面，右对齐
使用CSS
在这个例子里，html大概是这样这里用了前面提到的fieldset-legend-label组合，但是每一个元素都包含于list里，这样方便通过样式来调整。
没有使用css的效果，也就是前面这些代码说呈现出来的
加上css来调整一下这样修饰一下就好看一点了
如果使用上标签，也很简单，一句css就搞定了效果图
标签左对齐
可以简单的设置float left
但是出现了一个问题，list本身不会因为label的高度增加而增加，使用背景色以便更清楚地观察
解决办法是对父元素也使用左对齐这些参数都比较讲究，具体可以修改相应值，来看看效果
设置label（左对齐）
设置label（右对齐）
设置fieldset和legend的样式
很少见到没有修饰的fieldset和legend，但如果为包含legend的fieldset设置背景色，会发现不同的浏览器有不同的表现方式，IE和其他的浏览器不同，它会把legend包含在里面
解决方法是为IE专门引入一个CSS文件这个是为IE7或者之前的版本所作的兼容，其他的浏览器将会忽略这段代码，文件里面的内容是如果没有设置fieldset的position为relative，那么就会像下面这样
由于legend在各个浏览器里的padding不同，所以我们要为它设置一个值。设置fieldset的边框我们不希望在提交按钮后面再有什么边框或背景，所以很简单，去掉就行
改变默认的fieldset的外观
很多人没有用fieldset和legend，因为他们觉得样式与网站风格不协调，而且也不好调整，但是调整一下也不难
第一步，我们将fieldset合并起来，试着将fieldset的margin bottom设为0，但它看起来像是这样
下面一个legend的font height，导致了不能合并，我们也有办法解决，那就是使用-margin
但如果想把legend的文字往下移呢，可能会本能地想到改变position，但是在FF下，确是无效的，唯一的解决办法就是使用span在legend里关掉margin，不然会造成margin的距离加倍最后就像这样
要改变fieldset的背景，可以设置样式
必填区域和错误信息可以通过控制em元素的block与none来显示错误信息
显示必填信息
在右边显示错误信息“右边”是通过把label的长度与input的长度加起来得到的。
终于结束了，如果你看到这句话了，那么我佩服你
当前共有2条评论，我也要发表：