表单的作用主要是用来收集用户信息，一般表单由三部分组成：表单标签、表单域、表单按钮。表单标签指的是数据提交到服务器的方法。表单域包括文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮包括提交按钮、复位按钮和一般按钮。

    常用的web表单控件。总共有6类基本类型（不包括隐藏域等在页面中无法看到的），如下图所示：

    

    1、文本框（Textfield）

    文本框可以用来显示信息，显示用户输入的内容或编辑已有的内容。

    文本框分为四种基本类型：

单行文本框（不可输入回车符）：

    密码框（输入的内容显示不可显示）：

    多行文本框（有限的空间可展示更多的内容，并可以输入回车符）：

    输入文本…用于上传文件的文本框

    

    文本框的特点是对输入的内容几乎没有任何限制；不能严格限制用户输入内容的类型及长度。可通过以下的一些方法进行限制：

改变文本域的默认宽度，暗示用户输入的内容有长度限制；通过表单的上下文语境做限制；文本框的注释；特殊排版，暗示输入限制；使用js等技术手段强迫性限制输入的格式；

    

    在使用百度或谷歌搜索的时，会出现下拉的提示。什么时候使用这种功能呢？这种下拉的呈现主要是用来做信息提示或重复输入相同内容是出现。如下面的Amazon.com页面，当用户输入cell时，由于与cell相关的产品过多，所以需要列出相关的详细描述词汇来帮助用户进行更好的筛选。

    

    如果是涉及用户隐私、安全方面的输入，如：信用卡密码、个人身份证等信息，不应该使用。以招商银行的个人银行界面为例，由于输入的信息涉及用户安全信息，就不应有相关的提示信息。

    

    如何确定文本框的宽度？ 首先要尽量缩短文本框宽度。如果是已知宽度的内容，使用标准宽度。如：输入中文姓名的文本框3位即可。而比较宽松的输入内容，采用常见的宽度。如：电话号码的位数。如果有许多类似的文本框排版在一起，为了排版上面的美观，为保持排版的整洁应做适当的调整。

    如ebay用户注册界面，用户所要输入的用户名、住址等内容不能确定其宽度，同时为了保持排版上的美观。采用了统一的宽度。相反，ZIP/Postal code、phone number等处因可以知道其输入的具体数值长度，所以使用了常见的长度。

    

    如何设定文本框的格式？ 我们经常会遇到：为更便于用户的输入与识别，使用特殊的格式：

    

    点击文本框时，什么时候需要去掉提示信息，什么时候保持提示信息？ 在做这类问题时，要考虑用户的意图：当用户更趋向于重新填写时，使用点击后去掉提示信息（如果用户没有输入任何内容，当文本框失去焦点后应仍旧出现提示信息）；当用户更趋向于修改信息时，使用光标在文字后。

    如下图的信箱登录中：当用户需要修改用户名，应该将光标置于用户名框内即可。因为用户更倾向于修改某个写错的字符。如果是再次聚焦到密码输入框则需要将原密码全部清空，因为用户倾向于重新填写。

    

    文本框输入框的默认tab顺序？ 使用tab可以更有效的提高用户输入内容的速度，根据用户实际输入的顺序进行调整。在输入大量数据时候，不仅要考虑到tab的顺序问题，更要减少用户切换鼠标与键盘之间的使用次数。

    什么时候文本框内容需要右对齐？有至少两个数字输入框；输入框是垂直排列的；要对输入的数值进行比较的。下图的股票走势，使用居右的排版方式，更加便于用户比较数值。并且通过相应的颜色来表示股市的升降。

    

    如果输入的是密码，应使用密码框。

    输入域内的提示信息是在文本框内的灰色提示，亦可是一个默认的数值。一旦文本框被用户点击激活后，原先框内的提示信息要消失掉。当用户没有填写内容文本框失去焦点时，原本的提示信息应重新出现。使用提示信息的情况有：屏幕空间有限，同时需要有信息进行描述；该信息应是起提示作用的，而不是用户必须知道的；不要仅仅提示用户输入什么或是点击提交按钮的废话信息。如，提示输入文件名然后点击按钮。

    为什么要使用验证码？ 使用验证码可以阻止那些对网站不友好的访问，如机器注册&登录或机器破解密码。用户登录（在用户未登录前是无法验证信息的），在首次可以考虑无验证码登录，在登录失败n次后（一般为不超过3次）再给与带有验证码的登录。如下图：支付宝登录：首次登录无验证码，尝试登录n次失败后让用户输入验证码。淘宝登录：使用安全登录时无验证码（需安装控件）。只在普通状态登录时，登录失败超过3次后需输入验证码。

    

    但如果是注册，由于没有别的的验证信息，就要一直放出验证码了。值得注意的是，如果用户填写信息错误，验证码的数值不应变。ebay的注册页面，当用户提已经填写了验证码，但提交时出错。保持原有的验证码与已填入的内容不变。

    

    相似内容用相似布局：由于相同的样式与排版会使用户产生联想（相同的布局样式填写的内容类型都一致），并且，使用统一的排版格式，便于对比相同区域的内容；不要在输入超出文本框后自作聪明的跳出来，自动的增加区域显示填写的所有内容。用户在输入内容后可能会检查所填写的内容正确与否以及修改。因此，要给予足够的空间让输入信息完全的展示出来，便于用户阅读与修改。

    2、命令按钮（Button）

    命令按钮多用来提交当前内容的信息，且点击该按钮后做页面的不可撤销动作，到达的页面无法使用浏览器上的后退按钮返回。其在设计上让人感觉是可点的；广义上的命令按钮除了浏览器默认的按钮之外，还包括许多网站自己设计的按钮：

    

    优点：受益于按钮设计视觉上凸出的感觉，不光如此许多有凸出感的图片也会导致大量的用户点击（这是题外话了）；

    缺点：受制于按钮区域的限制，不能做得太长，谁见放两三行文字的按钮呢？因此，按钮内的文案需要简洁明了，不能像我的文章这样萝莉八所的；

    文字链接用于页面导航之用，用户点击文字链接后亦可通过浏览器上面的后退按钮返回到之前的页面；

    两者之间的区别：

单独的文本链接，借用某些特定的空间位置，再加上某些设计方式。仍旧可以很好的突出出来；在文本中的超链接是用户通过以往经验的积累知道是可以点击的，并且有些样式只有鼠标划过才知道是可以点击的，所以视觉上是最弱的。

    以下是使用文本链接的几种特殊情况：

如在文字段落里有链接，则使用文字链接；当文字过长的时候，则使用文字连接而不是命令按钮；

    页面主次按钮的区别？ 每个网页都有多个可点击的链接出口，如当前页面的导航、帮助、版权信息等各种链接。主按钮：当前页面首要完成的任务，如：注册页面的提交注册按钮是主按钮。在视觉上会设计的更加明显；次按钮：除了上述的完成首要任务的按钮或链接就是次要按钮，如页面的帮助、版权信息等。视觉上更加弱化。主次按钮在页面中使用应该注意的事项：在一个页面中，主要按钮自然越突出越好，且数量不易过多。如果是像注册，登录等界面，应保持整体画面的简洁以方便用户找到主要按钮。

    如图中的按钮，下部的两个按钮：Submit与Cancel。Submit按钮在视觉上就更突出。

    

    点击按钮后应有信息提示。尽管现在的网速已经有大幅度的提升，但用户仍旧会遇到这样的情况：当网速过慢的时候，用户会反复点击刚提交的信息而导致所填写的数据被重复提交。因此，仍旧有必要在用户点击按钮提交信息后，给予用户足够的的提示信息；当网页提交结束后，也应有相应的信息提示。

    下图是Gmail的几个界面，在几个关键的界面：登入、点击发信、信件发送完毕。均有相应的信息提示。

    

    命令按钮的文本标签需注意的事项？ 受到按钮视觉设计的限制，其文本标签一般不超过10个汉字。按钮的文本标签也需在表述清晰前提下保持简洁。

    3、多选框?heckbox）

    复选框：可同时选中多项。在同组的各不同选项应注意：使用的选项文字词性应是相同的，如同时使用动词或名词。避免词性混用。使用的选项文字应属于彼此独立关系，而不是包涵关系的。使用复选框，用户可以对选项做是与非的选择。复选框的标签表明选择的状态。因此，选项的含义必须有明显的是与非的关系。通常，复选框是被用来显示某个选项的开与关功能的。

    优点：类似于读书考试时候做的多选题，可选择多个选项。

    缺点：如果多选框过多，占用大量的空间。在空间紧张的时候要作合理的安排。

    下图截自淘宝，每组复选框的选项均保持彼此独立且不互相包涵。从词义上也保持了很好的一致性。

    

    除了常见的文字表达，对于一些描述不清楚的可考虑使用更直观的表达方式：如，表示颜色时，使用红色色块要比直接说红色要更直观。或表示字符大小时，使用实际的字号要比只显示字号要更好。

    下图是WordPress的文章编辑工具栏，里面的格式、文字颜色均使用比文本描述更直观的方式。亦可进行扩展思考：如产品的材质用、产品的颜色…总之，那些文字可能表达不清楚的都可以采取类似方式。

    

    下面是单选框与多选菜单的样式：

    复选框：占用的空间多，如有足够的空间，或是需要用户对该选项产生足够的重视考虑使用此表现形式；

A.选项一

B.选项二

C.选项三

D.选项四

    多选菜单：可在有限的空间展示出更多的选项，如果下拉选项数量未知或可能会很多则考虑使用多选下拉框，或是减少用户对该选项的重视程度使用该样式。

选项一 选项二 选项三 选项四

    单个复选框与单选框组的区别？与一组复选框不同，单个复选框，用来表示是与非的概念，而单选框组则表示在一组中选择几个选项。

    如何设计至少选一项的复选框？ 如果至少需要选择一个选项，应在标题处标明清楚。不应默认帮助用户选择一选项，除非这个选项是非常重要的。并当用户一个未选时，给出提示信息。

    设计复选框子控件应注意的几点 ：在排版上展示主次的从属关系；当主选项未被选择时，子选项均为关闭状态；由于其关系的复杂性，子选项应控制在两级，并确保其关系的明确。

    

    横竖排版那种更好？ 复选框可有两种排版方式：横排与竖排横排：空间不够，排版需保证每列的上下项目对齐；竖排：空间足够，或有子选项时使用。

    在下面的例子中：适合的送礼场景排版整齐，方便用户查找点击。而是和的送礼人物类型则出现了上下错位情况，不整齐不便于阅读。

    

    当同组有许多复选框时，特别是在竖直排版情况下。如果选项遵循一定的排序规律，则更便于用户找到内容。

    如果内容对用户是重要的，可事先帮用户选中该选项。

    如下： 盛大通行证申请默认将同意条款选中；而这点谷歌做得更好，点击命令按钮即表示已经同意协议并提交。

    

    保持选项描述文字整洁 。如果每个文本标签都包含了相同的文字部分，可将其放置在复选框标题处。

    使用label标签可将复选框与其标签包含在一起，增加可点击区域。带label的选项：

    不可更改复选框 。即使用户无法更改某个选项，仍旧需要向用户展示出来，用来提示用户。

    4、单选框（Radio Button）

    单选框是按考试时的单选题来的，和多选框不同，每组最多只选择一个选项。和多选框一样，如果选项过多，会占用大量的空间。

    单选框与复选框的区别是什么？ 在同组单选框里，各个选项处于互斥的关系。即：选择了a，就不能选择b或c；在同组复选框里，各个选项处于并列关系。即：选择了a，仍旧可以选择b或c。

    如果信息需要足够重视，使用单选框否则可以使用复选框代替：

    不正确：

继续显示该信息

不再显示该信息

    正确：

不再显示该信息

     其他与复选框一致。

    5、下拉列表（List/Menu）

    如果说多选框与单选框是浪费空间的大户，下拉列表则恰巧与前两者相反。它节省空间又可有数量庞大的下拉选项，真是小而强。

    优点：在空间有限的情况下，使用此小而强的控件，可以展示更多选项内容。比较常见的就是城市下拉列表；

    缺点：由于小而强过于节省空间，导致当下拉列表选项过多时。会让选择的人找不到要选择的选项。

    什么情况使用下拉框更合适？ 下拉框只有一种样式，使用其有下面2种情况：在有限空间有大量的选项；选项数目不确定，且可能超过有限的空间。

    如，该下拉框由于全国的省份有很多，所以使用下拉框要比选择框要更合适。

    

    列表框/下拉框的选项如何排序？ 由于列表框/下拉框在有限的空间内容纳大量的选项，对选项进行逻辑排序可提高用户的效率。如：按照字母排序，按照区域排序，按照推荐热度排序，按照范围大->小排序

    可增加的额外的手段提高用户高的效率。如：根据用户访问的ip判断用户来源，在地区选项中默认选择为该地区；在地区前加相应的字母，当用户按下键盘时，会自动跳转到相应的字母打头的选项中。

    如，该下拉框由于按照省份排列仍旧满足不了需求，使用开头字的第一个拼音作为序，当用户按下键盘时，滚动到相应的位置不为是一个好方法：

    

    何时用推荐选项作为默认选项？ 当默认选项比其他的选项要重要的多，或不希望用户对选项有修改。

    下拉框的不选择如何表示？ 使用无好过空白。使用空白：

选项a 选项b 选项c 选项d

     用文字表示无（好）：

无 选项a 选项b 选项c 选项d

    带预览功能的下拉框 。如前所说，当文字表述不清楚时可采用更直观的方式：

    

    下拉框的宽度。使用常用数值的宽度即可，如年份；使用统一宽度，保持视觉上的统一。

    6、文本域（File Field）

    上传文件之用。

    最后：好的交互不仅要可用，易用，提高用户使用效率的时候。更要尊重用户在之前使用过程中已养成的习惯（不管是好的还是坏的都要予以足够的尊重）。对给用户已养成的好习惯应予以保留；而坏习惯，不是立即将其纠正，而是给用户足够的时间与引导，使其转变过来。这是设计师必做的功课，设计出既能满足新用户的好习惯，又要引导老用户改变坏习惯的作品。

    本文转载自：http://blog.uxredesign.com/

    

建议继续学习：

1. Web表单设计之注册表单    (阅读：7684)
2. jquery.form.js，JQuery表单插件    (阅读：4184)
3. Web表单设计:表单结构    (阅读：3854)
4. 10个超棒jQuery表单操作代码片段    (阅读：3365)
5. 防止表单重复提交的几种策略    (阅读：3406)
6. 卡通风格网站设计一览    (阅读：3412)
7. 不得不说的糟糕设计    (阅读：3372)
8. 在信息架构层次对比开心网和Facebook的设计    (阅读：3172)
9. 解读iPhone平台的一些优秀设计思路    (阅读：3104)
10. 优先为移动设计带来的优势    (阅读：2805)