风雨十年,感恩同行
查看: 487|回复: 0

网页表单的Web标准解决方案

[复制链接]

该用户从未签到

发表于 2012-1-30 19:24:02 | 显示全部楼层 |阅读模式
进入eYou.com后,马上就给新版的邮件界面转化成Xhtml+CSS的工作,还好平时基本功还够扎实,有条不紊的干了下来。当然会遇到新的问题,比如,平时做网页,因为没有跟程序打过什么交道,较少使用表单。还好,世界还有google,让我可以轻松应对新挑战。一些经验,写出来大家分享。

基于易用性(accesibility)的考虑,表单的标准写法应该在和之中包含fieldset和legend(说明),让用户明白该表单域的内容概要。简单的结构如下:
......

在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观,好办,在CSS中把fieldset的border设置为0,legend的display设置为 none就行了。
在绝大多数情况下,表单的布局分两列,左边是标记(label),右边是输入框(input type="text"...)。如此简单的两列布局,我强烈建议不要使用表格。参考http://stylephreak.frogrun.com/uploads/source/cssform.php和http://www.aplus.co.yu/css/forms/?css=1(绝对有价值的两个参考,你已经可以不必往下看了),我们发现,Web标准通用解决方法是,为label和input type="text"...的外围加上一个div,并把把该div的display设置为block。把label设为float: left;(这也是要把div设置为display: block;的原因)之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是,固定label的宽度,然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是,使用单位em根据标记的最大字数来定宽度,不必辛苦测试px。
为了使我的阐述更容易理解,我简单写些代码:
XHTML:(部分)

表单实例
姓名

其他等等:

CSS:(部分)
body {/*跟表单无关,设置页面的显示效果*/
width: 400px;
margin: 20px auto;
font: 14px/1.5 Serif;
}
fieldset {
border: none;
border-top: 1px solid #ccc;
}
legend {
padding: 2px;
border: 1px solid #ddd;
background: #ececed;
}
div {
display: block;
padding: 5px 0;
}
label {
float: left;
width: 6em;
text-align: right;
}
.submit {
margin-left: 6em;
}
.submit input {
padding: 2px;
border: 1px solid #ccc;
background: #ececec;


相关技术服务需求,请联系管理员和客服QQ:2753533861或QQ:619920289
您需要登录后才可以回帖 登录 | 用户注册

本版积分规则

帖子推荐:
客服咨询

QQ:2753533861

服务时间 9:00-22:00

金蝶用友易助管家婆深度服务
快速回复 返回顶部 返回列表