[转载]表单的CSS设计(css form design)
原文:点这里
使用 Label
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条评论,我也要发表: