| 人性化的form设计 | (上官无耻)
平日我们在制作web表单时，除了布局外，从不考虑别的，也难怪，这有什么可考虑呢？表单而已嘛，供访客提交信息用的。其实并不这么简单。
在html的替代产品xhtml下，一个合格的表单不光要语法严谨，同时还要考虑到如何符合用户的使用习惯，甚至要照顾一些身体上有缺陷的人，比如手脚活动不便的老人和残疾人、视力不好的人等等。
举个简单的例子吧，现在的页面设计上为了追求精致的风格，字体通常都设置在12px，这是汉字，英文可能小到10px甚至9px，与此同时，表单上的文本框、单选按钮、多选按钮也都很小巧，对于手脚利落、眼睛没问题的人来说填写这样的表单并不算什么，但如果换成上面列举的那些特例人群，叫他们用小小的鼠标箭头去点击屏幕上小巧的表单元素恐怕就是一种折磨了。
那么对于这些人群，我们在设计表单的时候如何才能为他们做点什么呢？
首先请看下面这个，您可以把代码复制成htm页面在浏览器下观察^_^
<form name="form1" id="form1" method="post" action="">
<label for="name">姓名(<u>n</u>)</label>
<input name="name" type="text" id="name" accesskey="n" />
<br/>
<label for="mail">邮件(<u>m</u>)</label>
<input name="mail" type="text" id="mail" accesskey="m" />
</form>
在上面这个表单中，如果用户想选中并填写两个文本框，可以有三种选择：
1、直接点击文本框本身
2、直接点击文本框前面的提示文字
3、通过按下"alt"功能键加上提示文字后的字母来实现快捷键选中文本框
大家觉得如何，是不是有点使用传统window下软件的感觉，这就对了，这样我们就为用户营造了一个比较便利的交互环境，那些手脚不灵便，或是不习惯使用笔记本上轨迹球/触摸板的人一定会感谢你的。
至于这些功能的实现，上面的代码已经完整且清晰的给出了所有的关键所在，聪明的朋友一看就明白了。这里唯一需要新手注意的是，<label>内for属性所对应的值是表单元素的id属性，而对于一个元素来说，name和id两个属性是可以不同的。
（备注：xhtml下建议设计者将表单中所有的文字提示信息都置于<label>标签内，^_^学过vb的朋友对此应该有点相似的感觉吧。） | |
|
泉州V23网络为您的企业打造精品网站: 800元起"网站建设+精美网页设计+搜索引擎推广"服务!! 7*24咨询:13559567956
