CSS教程之网页罕见可用性毛病――表单组件毛病

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
3表单组件毛病
这一部分参考《Gui计划忌讳》的良多内容。
3.1互斥的复选框
成绩
一组复选框不克不及同时全体选中。
剖析
一个复选框组的属性之一就是一切选项能全体同时被选中。用户看到一个复选框组，默许它是具有如许的属性的。假如用户选中某个选项的同时，别的选项主动作废选择，会让用户感应利诱。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某网站编纂笔墨款式时的选项。假如选择最初一项“无”，下面的四项会主动作废选择。
3.2无初始值的单选按钮组
成绩
单选按钮组的初始形态没有被选中的项。
剖析
用户大概不往选择这个单选按钮组，没有默许值的话就增添了用户操纵毛病的概率。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>网易通行证注册表单。假如用户习气性的不往修正性别，体系就会报错。1234下一页
3.3只要一项的单选按钮组
<p/>成绩
单选按钮组中只要一项，即只要一个单选按钮。
剖析
这里的单选按钮不具有选择的功效，勾引用户往做无用的点击操纵。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某网站购物流程中的一个表单。大概为了美妙，制造页面时给第一项“购置产物”也利用了单选按钮。
3.4在非开/关设当中利用复选框
成绩
在二选一的功效中利用复选框。
剖析
一个复选框的实质是一个开关。计划和开辟职员经常为了节俭空间大概让表单看起来美妙一些，把一些本应是利用单选按钮组的二选一选项兼并成一个选项，用复选框来完成。如许会利用户利诱，不晓得这个选项是甚么意义。

案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某网站购物流程中的一个表单。在“色采选择”这一项，本应是两个选项：玄色和红色，这里却兼并成一个选项“玄色”
3.5利用按钮作为开关
成绩
利用按钮来让用户做开/关的操纵。
剖析
利用按钮来开启、封闭网页中某些功效，如许做会利用户没法判别以后的形态，不晓得该功效是开启着海狮封闭着。并且按钮给用户的感到常常是用来提交或重设数据用的。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某论坛发帖时检察初级选项的按钮。用户点击该按钮后，初级选项被显现，但按钮并没有体现呈现在初级选项的形态：是已显现仍是没显现。初级选项显现今后，点击这个“检察初级选项”按钮后，实际上是埋没初级选项。
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/><pstyle="TEXT-INDENT:2em"/><pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>假如利用复选框，就会明白地标示出以后形态。上一页1234下一页
3.6给只读数据利用文本框
<p/>成绩
利用文本框出现只读数据。
剖析
表单中一些项目，用户没法修正，就不要利用文本框来出现这些数据，哪怕是具有“disabled”属性的不成编纂文本框。
一样平常在如许的前提下利用不成编纂的文本框：用户经由过程操纵开启/封闭某个选项（如点选或作废了某个复选框），引发某文本框的形态变更：可用大概不成用。即，不成编纂的文本框呈现在页面中，其“不成用”的形态是能够经由过程用户操纵变成可用的形态的。
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>随身大夫网站的“假造大夫”功效中的一步。性别和出身日期都没法修正，就不该该利用文本框或单选按钮如许的组件。
3.7输出时简单堕落的文本框
成绩
关于格局有严厉请求的表单项，利用文本框来承受用户输出。
剖析

太过开放权限的文本框简单形成用户输出毛病。用户输出的数据是甚么格局应当由开辟职员计划好，而不是请求用户按格局输出。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>随身大夫网站的用户材料填写表单。个中诞辰一项很简单形成用户输出毛病。这里假如利用三个分离代表“年”、“月”、“日”的三

12下一页

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
个下拉菜单，会对照好。上一页1234下一页
3.3只要一项的单选按钮组</p><p/>成绩
单选按钮组中只要一项，即只要一个单选按钮。
剖析
这里的单选按钮不具有选择的功效，勾引用户往做无用的点击操纵。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某网站购物流程中的一个表单。大概为了美妙，制造页面时给第一项“购置产物”也利用了单选按钮。
3.4在非开/关设当中利用复选框
成绩
在二选一的功效中利用复选框。
剖析
一个复选框的实质是一个开关。计划和开辟职员经常为了节俭空间大概让表单看起来美妙一些，把一些本应是利用单选按钮组的二选一选项兼并成一个选项，用复选框来完成。如许会利用户利诱，不晓得这个选项是甚么意义。

案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某网站购物流程中的一个表单。在“色采选择”这一项，本应是两个选项：玄色和红色，这里却兼并成一个选项“玄色”
3.5利用按钮作为开关
成绩
利用按钮来让用户做开/关的操纵。
剖析
利用按钮来开启、封闭网页中某些功效，如许做会利用户没法判别以后的形态，不晓得该功效是开启着海狮封闭着。并且按钮给用户的感到常常是用来提交或重设数据用的。
案例
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>某论坛发帖时检察初级选项的按钮。用户点击该按钮后，初级选项被显现，但按钮并没有体现呈现在初级选项的形态：是已显现仍是没显现。初级选项显现今后，点击这个“检察初级选项”按钮后，实际上是埋没初级选项。
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/><pstyle="TEXT-INDENT:2em"/><pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

假如利用复选框，就会明白地标示出以后形态。
上一页1234

上一页12

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。