那校验有哪些情况呢？

1、 READY？

提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前，降低出错的可能性。它出现的形式分为以下几类：

a) 简要提示——有如：icon，icon+文字，文字，暗提示。

出现情况：一般提示信息比较简短，能够让用户一目了然的记住，并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b) 复杂提示——以缩略信息或icon来显示，通过点击和hover进行查看。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c) 限制操作——在表单填写前，对某些需要填写或者操作项会有一些disabled的状态，只有当某些条件被激活用户才能进行操作。

出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态；或当填写项较少，填写项均可以即时校验，就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d) 其他提示——填写表单的时候，还有一种比较特殊但又更简单明了的提示，例如：使用图片说明。

出现情况：当填写表单项的提示说明很难用文字清晰表述，这时候可以使用图片，视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、 ING~

当您浏览完整体的表单，接下来就是进行填写的步骤。在填写的过程中，我们会碰到很多类型的校验，比如：即时校验的友情类提示，即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况

a) 即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示，而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机人页

（当你选择了儿童票时会提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型，但并不强制。）

Buy360.com的注册页

（当onfocus的时候会出现下方帮助提示类信息，当然也有很多网站会做成暗提示。）

163.com的注册页

（当onfocus的时候会出现右边密码的强度，会根据你输入密码的改变而提示你的密码强弱。）

b) 即时校验的警示提示

即时校验的警示提示是属于错误类提示，这类错误会影响表单无法提交。

警示提示类的校验重要级别非常高，因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

163.com的注册页

Buy360.com的注册页

c) 关联性校验

关联性校验是所填写项之间会有相互影响的逻辑关系，后一项的填写是否正确会取决与前几项的填写内容。

Buy360.com的注册页

（设置密码填写项与确认密码填写项不一致时会提示错误。）

招商银行信用卡支付页

携程旅行计划创建页

（旅行计划目的地1和目的地2的时间段有冲突时就会提示错误。）

3、 ACTION！

当您填写完表单，开始触发提交按钮的时候，表单会开始进行表单提交后的校验。目前比较多的有两种，一种是逐条提示，另一种是一次性全部提示。

a) 逐条提示

逐条提示是在提交表单后，虽然有多项错误，但是每次提交只按顺序显示一条错误。逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

yihaodian.com注册页

b) 一次性全部提示

一次性全部提示是在提交表单时将所有错误全部罗列。

Yahoo.com注册页

Hotels.com预订页

（该网站设计不仅将所有错误一次性全部罗列在填写框右侧，并且提交按钮的hover状态再次将所有错误呈现，点击某项错误会直接锚点跳转至该错误填写区域。）

思考：

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

除了这些基本的设计原则，在设计表单的校验中，还会有很多让我很纠结的点，以下罗列一些我个人认为比较好的经验。

1、 在设计校验时虽然需要考虑到出错提示的明显突出，但是在实际情况中，会和页面的空间大小和布局相关，需要考虑实际情况来定夺。

2、 尽量避免不必要的错误，一是自动喷入值；二是限制型操作；

比如，在身份证填写项中填写了身份证信息时，如果下面还需要填写出生日期，完全可以直接喷入身份证上的出生日期值。

3、 有的错误校验会自动修正一些信息，但是这类行为请不要忘记告知用户。

4、 友情类提示的校验重要级别永远低于警示类错误校验，在视觉和交互的位置上应该酌情考虑。

5、 错误信息出现的位置视觉等效果应该统一，并且在位置上保持在用户可见的范围内。

6、 页面自动锚记至出错项处，如果是多条可锚记至第一项，最好还能on focus至出错的填写项。

7、 不要轻易清空用户填写的内容。

8、 错误提示不仅显示错误点，更可以推荐用户一些正确填写建议。

9、 出现了错误提示后，再次on focus至填写项时，不要隐藏错误提示。

本文作者：S++　转载请注明来自：携程UED

Fancy checkboxes and radio buttons with CSS

Visit the plugin homepage

jqTransform

Visit the plugin homepage

FancyForm

Visit the plugin homepage

jQuery Checkbox

Visit the plugin homepage

jNice

Visit the plugin homepage

NiceForms

Visit the plugin homepage

iPhone-style Checkboxes

Visit the plugin homepage

ezMark jQuery Checkbox & Radio Button plugin

Visit the plugin homepage

jQuery Fancy Custom Radio-button and Checkbox

Visit the plugin homepage

iPhone Style Radio and Checkbox

Visit the plugin homepage

Create iPhone-style buttons with the iButton jQuery Plug-in

Visit the plugin homepage

原文：http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons

EEHarbor

EEHabor offers ExpressionEngine goods, so forms are probably their expertise.

The website itself is really beautiful and clean. The register form is clean, beautiful and straight forward, it is certainly a form that will not scar you away.

Contrast

Contrast is a web apps developer. Their website is pretty unique and nice, good usage of typography, colors and shapes. The contact form is also pretty unique and fun.

SVN2FTP

SVN2FTP is a hosted source control system. The website has a nice fun approach and a beautiful texture. The contact form is also nice and different from usual.

Ally Creative

Ally Creative is a small creative company. Their website is clean and have a nice textured background, the contact form is also pretty nice.

Think Vitamin Membership

Think Vitamin is a nice place to watch videos to learn web design and development. Besides having a nice website, all their forms are beautiful and pleasant.

Scribble & Tweak

A beautiful and neat single page layout that holds a nice and easy contact form.

Barnt & Arnst

I know I already showcased this website in previous lists, but I really like its colors and simple layout. And they deserve and extra point for their super clean contact form.

The Bullitt Agency

Nice website layout based on shades of black, gray and some beiges. Beautiful background images and classic contact form.

Atlason

Clean and beautiful layout with “built in” forms for FTP and email.

Major Tom

Nice image based layout with a “hidden” sign in form for clients.

Blind Pig Design

Their website is really cool. And as for the contact form, pretty classic and clean. Also loved the subject detail from the contact form – Oink!

Clyde Quay Wharf

A residential project from New Zealand with a layout based on beautiful background images and elegant type choices. The “register your interest” form is pretty clean and beautiful.

37 East

If you are thinking about doing the real African Safari, you should check out this website. The layout is based on really beautiful background images and interesting typography.

Michael Freimuth

Michael Freimuth is a art director and illustrator. His website is pretty simple and cool. The login form to browse archives is also really nice.

Social Design House

Their website has delicate colors combination and a good choice of typography. The contact form is also pretty beautiful.

Tinkering Monkey

Besides having some pretty stylish products to sell, Tinkering Monkey has a super clean layout. The contact form is also pretty neat.

Go Live!

Need a button to shout about your work? Try this! Go Live has a pretty colorful layout and their “let’s do it form” is also really nice.

Sophie Hardach

A cool single page layout for a book website. Contact form really unique.

Soapbox

Simple layout with a beautiful color scheme.

RxBalance

Beautiful watercolored layout with texture background. Delicate colors and typography. The contact form is also really elegant and simple.

原文：http://www.jackchen.cn/blog/?p=4401

以下对国内外近20个网站的注册表单进行的分析，并归类总结优秀表单的设计方法。文章最后对其中三个案例进行优化对比。

1． 越少的填写项越好

Site inspire

CSS web site award

Tumblr

DeviantArt小tips：将表格内容title写入格子内，在视觉上降低“要填很多项”的感觉

反例：Another Bookmark，填写项太多，字号太小格子太密

反例：Shutter Stock，同上，填写项过多格子过密

反例：点点印，当全是必填项时，可以不要*号，减小用户压力

2． 无论填写项多还是少，使用宽大的格子，行与行之间留白重组。一个清爽的页面比被密密麻麻小字儿充满的页面更容易诱使人注册。

Pictory

糯米

反例：sisTown（相比糯米只多了一项，却在视觉上感觉繁重很多）

3． 即时的提示（该格子内填什么，当光标移入才提示），即时的反馈（填的对不对，当光标移出再提示）。

twitter

Last.fm

Bangumi (注：此处提示信息相对有些过多)

Hashable

案例

案例一：Airbnb

分析：页面左右轻重不统一，视觉上已聚焦左侧框和右侧框，无法视觉focus

修改方法：

1） 将页面元素重新排列，让用户将注意力集中在“注册”上

2） 页头横线拉长覆盖全部宽度，页尾文案放在一行

3） 将填写项title放入格子中，是页面整齐化又不感觉内容过多

案例二：UserInterface

分析：

1） 只有四项需要填，但是过多无用的文案引导

2） 填写title及填写框没有任何对齐模式，界面较乱

3） UserInterface的logo没有突出，页面的没有title

4） 注册按钮太不突出，不能诱导注册

修改方法：

1） 把没用文案全部掉

2） 填写项titel与框左对齐

3） 修正logo及加入页面title

4） 强化“注册”按钮视觉效果

案例三：Visualize.us

分析：

1） 框长度不一导致左侧不整齐

2） 右侧干扰信息过明显

修改方法：

1） 将填写框统一长度

2） 右侧突出是有FB或twitter账号登陆，减轻干扰

来源：http://blog.sina.com.cn/s/blog_6d04fca50100r6bp.html

你是否曾为表单设计感到过沮丧或不知所措呢？接下来三篇文章，希望能彻底改变你的看法，真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助，让我有机会细心品味设计表单的乐趣。总体来说，Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品（Sell Your Item）表单售出；MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的；YouTube、Youku通过上传视频（Upload Your Video）表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会，Web表单常常是漫长旅途的最后一步，也是最重要的一步。

你会设计表单吗？

以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素，过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌，想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等，但表单却给用户带来了麻烦，妨碍了他们。

大多数表单是“由内而外”（Inside Out）而不是“由外而内”（Outside In）设计出来的。举个例子：如果谁想成为网站的会员，网站就会跳出表单要求用户提供用户名，密码，电子邮箱等。这就是“由内而外”的设计，多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时，“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计，目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在，但又能保证系统和用户都获得想要的东西。

在电子商务、社交互动、生产力网站里，我们发现表单阻碍着用户需求和商业目标，表现为：

• 人们从电子商务网站购买需要的商品，而结算表单阻碍着交易双方。
• 人们加入社交网站与朋友聊天或分享内容，从增加用户基数与活跃度方面说，阻碍双方的是注册表单和联系表单。
• 人们希望基于互联网的生产力工具，创造高效协同工作，当公司要增加网站内容，增加了用户的时间，表单再次阻碍了两者。

Web表单设计在支付和注册环节，会起到至关重要的中介作用。2004年人机交互（Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”，作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例，提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响，并成为评估和资助设计项目的范本。

通过逐页画出整个流程，同时配合说明用户离开和最佳实践分析的网站点击数据，下面我们分别分析每种数据的意义：

可用性测试 目的在于可获得宝贵的定性与定量数据。

• 错误或问题的数量或位置；
• 错误或问题的严重程度；
• 完成率；
• 完成整个表单或部分表单的时间；
• 满意度评分；
• 任务主观评论。

实地测试 从人种学角度观察，人们在不同环境中，与表单的互动方式情况。

• 访问表单要求填写信息的来源：文档、软件和人等；
• 表单填写环境：吵闹的办公室和小监视器等；
• 任何说明表单完成或错误率的额外情境。

客户支持 通过客服或访谈等，了解用户使用表单时发现的问题，有利于分离和解决问题。

• 报告最多的问题；
• 解决报告问题的常见办法；
• 问题报告人的统计信息；
• 问题报告人所使用的操作系统及其浏览器设置。

网站追踪 表单可用追踪任意数量的有用量化指标。

• 完成率；
• 如果表单未完成，人们是在哪个位置放弃填写表单的；
• 人们访问表单的方式；
• 已使用哪些表单元素；
• 已输入哪些数据；
• 浏览器和操作系统信息。

眼动跟踪 记录用户如何理解表单的表现形式，可用于解释复杂的地方。

• 人们在表单上看到了什么；
• 眼球固定次数：解析表单所花的努力；
• 眼球固定时间长度：看每个元素所花费的时间。

Web惯例 调查表单设计问题的共同解决方案可提供宝贵见解。

• 设计问题的独特解决方案；
• 网上通用的模式。

观察用户如何完成表单，或者利用现成的网站分析软件监测网站日志，也可以得到大量有用的观测信息。

虽然很难设计出优秀的表单，很多时候都是“视情况而定”，但是通过考虑表单的设计因素，也就是以下我们所说的，找到适当解决办法的原则和模式，可以设计出不错的表单。闲话少叙，针对互联网表单设计，原则如下：

• 尽量减少痛苦－用户不在意之前是什么，更在意之后能得到什么，让过程尽量简洁快速。
• 说明填写完成路径－表单应该有清晰的提示或帮助用户，告诉他们如何能快速完成目标。
• 考虑情境－表单并非独立存在，它们都是更广泛情境（受众群体、应用、业务）的组成部分，这些情境决定如何使用表单。
• 确保一致沟通－表单是用户与公司沟通的中间人，多个团队参与对话，但最后表单只能传达一种一致的声音。

贾里德·斯普尔曾经有一个经典案例：修改按钮为网站年收入增加3亿美元。粗听起来好像是天方夜谭的事情，但是它确实是事实。良好的设计如何能为商业创造价值，这是设计团队一直在思考的问题。有一点是可以肯定的，我们用客观的数据与严谨的实验，去证明我们设计原则与设计模式，让它们的设计价值最大化，达到为商业创造价值的目标。

你会构建表单组织吗？

面对优秀表单设计，人们能够不费吹灰之力就能填完表单，这里有视觉与交互设计考虑因素对表单的影响，但更重要的因素是表单的内容及组织方式。以下是经过多年的设计实践我们能得到的一些原则：

• 应当花时间评估表单中的问题。应当提高警觉，去除一切不必要的问题。
• 表单所提问题（标签）应当尽量简洁。
• 如果人们会误解简洁标签，应当寻找使用自然语言的机会，澄清表单要求人们回答的问题。
• 表单所提问题来自多个不同人或部门，应当确保表单统一口径。
• 可以将表单内容组织成逻辑组，有助于浏览和完成填写。
• 如果可能，应当以对话形式构建表单。主题间的自然间断有助于组织表单。
• 如果表单可自然分成若干主题，一个网页可能就足够组织表单。
• 如果表单包含大量问题，同时有若干主题，可能需要多个网页来组织表单。
• 如果表单包含大量问题，而只和一个主题相关，一般需要一个较长网页来组织表单。
• 可以考虑在表单填完之后提出可选问题。可能会比在初始表单中就提出这些问题能获得更多答案。
• 可以考虑采用Web惯例调查发现特定类型网站如何组织表单。
• 应当采用最少的必要视觉信息来区分内容组。
• 英文网站首字母应当大写，使内容组更容易浏览。

Effortmark公司可用性顾问，卡罗琳·贾勒特说：“先考虑人，在考虑像素。”开始设计前要思考一个问题：用户真正关心什么？设计师在关注像素的同时可能忽视了人因因素-比如标签末端是否需要放置冒号等微妙细节。用户真的不关心冒号。其实用户真正关心的是问题的内容和为何要问这些问题。从了解用户开始，并了解你的公司搞清楚为什么表单要这么设计？是用户关心的关系点问题么？“保留，删减，延迟，解释”形成更好问题的四大策略，同时，多种视角的平衡用户需求与商业需求。

你还应该注意哪些表单设计细节？

设计表单时要注意细节问题的处理，比如：表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点就是让用户知道完成表单的路径。

• 确保表单名称符合人们的期望，并简洁解释每个表单的用途。
• 如果表单需要时间或者查询信息才能填写，可以采用起始页来设定人们的期望。
• 由始至终采用清晰浏览线和有效视觉步伐来引导人们，确保说明清晰的填写完成路径。
• 对于关键任务表单，比如结算表单或者注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。
• 如果表单分为多个已知的有序网页，可以采用进程指示来传达范围、状态和位置等信息。
• 如果表单没有清晰的有序网页，不要采用进程指示，应当采用更笼统的进程指示，而不要设置错误期望。
• 设计表单布局时，应考虑使用Tab键的“跳转”体验。
• 采用“tabindex”HTML属性来控制表单的跳转顺序。

Oracle可达性主管，彼得·沃勒克说：“对许多残障用户而言，表单的设计可达性尤其重要。可达性的核心是可用性。例如，如果网页不能使用或者无法开始，可达性首先需要“超级设计”（Uber-design)。包括：超级减少痛苦、超级明示完成路径、超级考虑情镜、超级确保一致沟通。同时可以遵循W3C制定的互联网内容可达性指南（WCAG)和美国采购法508章的最佳可达性指南。

注册表单设计例子（Registration Form Design Examples）：

Twitter

Mint

Facebook

Windowslive

Vox

Box

Netvibes

Compete

Aol

WordPress

Blogger

Xanga

Hi5

Outright

Deviantart

Basecamp

Yelp

Vimeo

Ning

Metacafe

Mint

Fotki

Myspace

Lulu

Animoto

Wufoo

Geni

Netflix

Ebay

Ballpark

Craiglist

Gowalla

Mobileme

登录表单设计例子（Login Form Design Examples）：

Twitter

Animoto

Tumblr

delicious

Myspace

Gliffy

Footnote

Hulu

Polldaddy

Virb

Piczo

Mint

Tutsplus

Cnn

Viddler

Typepad

Devunity

Imagekind

Yahoo

Scrapblog

Zooomr

Mobileme

Grooveshark

来源：http://www.aliued.cn/2011/03/15/web-form-design-form-structure.html

你是否曾为表单设计感到过沮丧或不知所措呢？接下来三篇文章，希望能彻底改变你的看法，真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助，让我有机会细心品味设计表单的乐趣。总体来说，Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品（Sell Your Item）表单售出；MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的；YouTube、Youku通过上传视频（Upload Your Video）表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会，Web表单常常是漫长旅途的最后一步，也是最重要的一步。

你会设计表单吗？

以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素，过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌，想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等，但表单却给用户带来了麻烦，妨碍了他们。

大多数表单是“由内而外”（Inside Out）而不是“由外而内”（Outside In）设计出来的。举个例子：如果谁想成为网站的会员，网站就会跳出表单要求用户提供用户名，密码，电子邮箱等。这就是“由内而外”的设计，多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时，“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计，目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在，但又能保证系统和用户都获得想要的东西。

在电子商务、社交互动、生产力网站里，我们发现表单阻碍着用户需求和商业目标，表现为：

• 人们从电子商务网站购买需要的商品，而结算表单阻碍着交易双方。
• 人们加入社交网站与朋友聊天或分享内容，从增加用户基数与活跃度方面说，阻碍双方的是注册表单和联系表单。
• 人们希望基于互联网的生产力工具，创造高效协同工作，当公司要增加网站内容，增加了用户的时间，表单再次阻碍了两者。

Web表单设计在支付和注册环节，会起到至关重要的中介作用。2004年人机交互（Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”，作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例，提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响，并成为评估和资助设计项目的范本。

通过逐页画出整个流程，同时配合说明用户离开和最佳实践分析的网站点击数据，下面我们分别分析每种数据的意义：

可用性测试 目的在于可获得宝贵的定性与定量数据。

• 错误或问题的数量或位置；
• 错误或问题的严重程度；
• 完成率；
• 完成整个表单或部分表单的时间；
• 满意度评分；
• 任务主观评论。

实地测试 从人种学角度观察，人们在不同环境中，与表单的互动方式情况。

• 访问表单要求填写信息的来源：文档、软件和人等；
• 表单填写环境：吵闹的办公室和小监视器等；
• 任何说明表单完成或错误率的额外情境。

客户支持 通过客服或访谈等，了解用户使用表单时发现的问题，有利于分离和解决问题。

• 报告最多的问题；
• 解决报告问题的常见办法；
• 问题报告人的统计信息；
• 问题报告人所使用的操作系统及其浏览器设置。

网站追踪 表单可用追踪任意数量的有用量化指标。

• 完成率；
• 如果表单未完成，人们是在哪个位置放弃填写表单的；
• 人们访问表单的方式；
• 已使用哪些表单元素；
• 已输入哪些数据；
• 浏览器和操作系统信息。

眼动跟踪 记录用户如何理解表单的表现形式，可用于解释复杂的地方。

• 人们在表单上看到了什么；
• 眼球固定次数：解析表单所花的努力；
• 眼球固定时间长度：看每个元素所花费的时间。

Web惯例 调查表单设计问题的共同解决方案可提供宝贵见解。

• 设计问题的独特解决方案；
• 网上通用的模式。

观察用户如何完成表单，或者利用现成的网站分析软件监测网站日志，也可以得到大量有用的观测信息。

虽然很难设计出优秀的表单，很多时候都是“视情况而定”，但是通过考虑表单的设计因素，也就是以下我们所说的，找到适当解决办法的原则和模式，可以设计出不错的表单。闲话少叙，针对互联网表单设计，原则如下：

• 尽量减少痛苦－用户不在意之前是什么，更在意之后能得到什么，让过程尽量简洁快速。
• 说明填写完成路径－表单应该有清晰的提示或帮助用户，告诉他们如何能快速完成目标。
• 考虑情境－表单并非独立存在，它们都是更广泛情境（受众群体、应用、业务）的组成部分，这些情境决定如何使用表单。
• 确保一致沟通－表单是用户与公司沟通的中间人，多个团队参与对话，但最后表单只能传达一种一致的声音。

贾里德·斯普尔曾经有一个经典案例：修改按钮为网站年收入增加3亿美元。粗听起来好像是天方夜谭的事情，但是它确实是事实。良好的设计如何能为商业创造价值，这是设计团队一直在思考的问题。有一点是可以肯定的，我们用客观的数据与严谨的实验，去证明我们设计原则与设计模式，让它们的设计价值最大化，达到为商业创造价值的目标。

你会构建表单组织吗？

面对优秀表单设计，人们能够不费吹灰之力就能填完表单，这里有视觉与交互设计考虑因素对表单的影响，但更重要的因素是表单的内容及组织方式。以下是经过多年的设计实践我们能得到的一些原则：

• 应当花时间评估表单中的问题。应当提高警觉，去除一切不必要的问题。
• 表单所提问题（标签）应当尽量简洁。
• 如果人们会误解简洁标签，应当寻找使用自然语言的机会，澄清表单要求人们回答的问题。
• 表单所提问题来自多个不同人或部门，应当确保表单统一口径。
• 可以将表单内容组织成逻辑组，有助于浏览和完成填写。
• 如果可能，应当以对话形式构建表单。主题间的自然间断有助于组织表单。
• 如果表单可自然分成若干主题，一个网页可能就足够组织表单。
• 如果表单包含大量问题，同时有若干主题，可能需要多个网页来组织表单。
• 如果表单包含大量问题，而只和一个主题相关，一般需要一个较长网页来组织表单。
• 可以考虑在表单填完之后提出可选问题。可能会比在初始表单中就提出这些问题能获得更多答案。
• 可以考虑采用Web惯例调查发现特定类型网站如何组织表单。
• 应当采用最少的必要视觉信息来区分内容组。
• 英文网站首字母应当大写，使内容组更容易浏览。

Effortmark公司可用性顾问，卡罗琳·贾勒特说：“先考虑人，在考虑像素。”开始设计前要思考一个问题：用户真正关心什么？设计师在关注像素的同时可能忽视了人因因素-比如标签末端是否需要放置冒号等微妙细节。用户真的不关心冒号。其实用户真正关心的是问题的内容和为何要问这些问题。从了解用户开始，并了解你的公司搞清楚为什么表单要这么设计？是用户关心的关系点问题么？“保留，删减，延迟，解释”形成更好问题的四大策略，同时，多种视角的平衡用户需求与商业需求。

你还应该注意哪些表单设计细节？

设计表单时要注意细节问题的处理，比如：表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点就是让用户知道完成表单的路径。

• 确保表单名称符合人们的期望，并简洁解释每个表单的用途。
• 如果表单需要时间或者查询信息才能填写，可以采用起始页来设定人们的期望。
• 由始至终采用清晰浏览线和有效视觉步伐来引导人们，确保说明清晰的填写完成路径。
• 对于关键任务表单，比如结算表单或者注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。
• 如果表单分为多个已知的有序网页，可以采用进程指示来传达范围、状态和位置等信息。
• 如果表单没有清晰的有序网页，不要采用进程指示，应当采用更笼统的进程指示，而不要设置错误期望。
• 设计表单布局时，应考虑使用Tab键的“跳转”体验。
• 采用“tabindex”HTML属性来控制表单的跳转顺序。

Oracle可达性主管，彼得·沃勒克说：“对许多残障用户而言，表单的设计可达性尤其重要。可达性的核心是可用性。例如，如果网页不能使用或者无法开始，可达性首先需要“超级设计”（Uber-design)。包括：超级减少痛苦、超级明示完成路径、超级考虑情镜、超级确保一致沟通。同时可以遵循W3C制定的互联网内容可达性指南（WCAG)和美国采购法508章的最佳可达性指南。

原文：http://www.alitedesign.com/archives/415

1. Wufoo

2. Ballpark

3. Squarespace

4. Concept Share

5. The Resumator

6. Big Cartel

7. MindMeister Editions

8. Freckle

9. Nibble Tech

10. Form Spring

11. Zen

12. Strutta

13. Basecamp

14. DropSend

15. LightCMS

16. Linkpatch

17. Mailer Mailer

18. Livestream

19. eWedding

20. Media Temple

21. Litmus

22. Brightbox

23. Harvest

24. Web-o-matic

25. Crazy Egg

下面是一个关于web表单设计的调查报告，这个结果来源于100个令人瞩目的网站。

注册表单设计调查

1.表单的安置

1.1注册表单链接的标题是怎么样的？

当用户想要加入某个时，他们会试图寻找“sign-up”，“register”，“join”，“join”，“become a member”或者“creat an account”等这样的短语。用户期望可以通过这些链到注册表单。不幸的是，情况不一定是这样的。

从图表可见，最受欢迎的标题是“Sign up”（40%），接着是“Join”（18%），“Register”（18%）以及“Creat account”（17%），极少数是按钮超大，又闪亮，并且写着“start here”的字样。设计师与其设计并强调服务的功能性还不如试图去表达信息。

1.2注册表单的链接放在哪儿？

当用户第一次访问某个网站，他们会试图找出单独布局块代表的意思。他们的眼睛运动是跳跃的，并且用户试图了解哪个区域是更重要的，他们想要的内容可能被放在什么地方。为了满足用户体验，设计师需要帮助用户直观地知道哪些是在开始使用服务前所需要做的事。

如果用户找不到通往注册表单的链接，他可就不会注册你的服务。因此让链接尽可能地显而易见是最关键的。那么设计师应该把“注册”的链接放在什么地方？根据调查，这个注册链接

* 59%的网站是放在网站的顶部（其中76%是被放在右上角）
* 21%的网站是放在首页的突出位置（链接或者表单自己被放在首页上）
* 9%是被隐藏在顶部“登陆”链接之后（例如：Craigslist）
* 很少注册链接会被放在侧边栏上（7%-Propeller, Xing），但是4%的站点为用户直接提供服务，只有在用户需要保存设置的时候才需要用户进行注册。

2.表单的设计

2.1需要简化注册表单的样式吗？

当用户点击了注册链接之后，他很有可能想要注册你提供的服务。更重要的是，他并没有点击那些探索更深导航操作的链接或者具有吸引力的广告链接。

因此，设计师尝试去掉所有没必要的详细资料以及不能帮助用户完成表单的描述。常常只是呈现一个logo和表单自身，没有任何的导航操作和附加信息。用户必须尽可能地关注在他要去完成的任务上。任何会分散用户注意力的因素不应该被保留。

设计师经常使用“最小化”的布局来构建注册表单。根据调查，61%的web表单和普遍的页面相比更简单（例如：MovableType, Livejournal, Amazon, Yandex.ru）

从雅虎的注册表单可以看出，访问者只需要填写账户信息即可，没有别的干扰因素去分散用户的注意力。注意表单中的语气和语义都是吸引人的对话式，这既简单又友好。

Flixster是个典型的反面例子，它把表单页面塞得满满的，一点也不尊重它的访问者。注册页面上提供了每种可能的操作导航，并且登陆页面上右边的广告比登陆表单还要突出。Photobucket应该是我们见过的第二拥挤的表单。

2.2需要提供任何附加信息吗？

许多设计师试图通过类似于帮助、信息内容要求甚至是版权申明的附加信息来鼓励访问者主动填写表格。但是它不同于点对点，在大部分例子中注册的好处依然是通过表单来体现。

* 41%的表单告诉用户注册的好处（MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com）
* 28%仅仅是单纯的注册页面，没有任何附加信息（Pownce, DeviantArt, Dailymotion）
* 11%告诉用户需要多久时间来填写（Threadless, Newsvine, WordPress)
* 很少一部分（6%）网站提到注册过程中所需要填写的信息。一些步骤中会提供一些警告（8%）和示意（6%，例如37signals, Bloglines）

2.3单页表单VS多页表单

调查结果中，93%的表单是单页表单。设计师试图帮助用户尽可能快速和无痛地完成注册流程。只有一些网站利用多页表单把探索用户参数选择结合在注册过程中。

比如，Meebo把一个完整的注册过程整合在一张注册表单中，并且通过一个弹出框的形式为用户提供注册向导。这个表单由6个页面组成，用户通过一些附加信息的选择从而进行他们账户的设置。

2.4输入框标附加信题需要突出吗？

62%的注册表单用粗体的方式去突出输入框的标题。还有的使用斜体去达到同样的效果。为了让标签能够更加可见，20%的注册表单用色彩，18%的用纯文本。

2.5标签对齐

* 41%的网站使用标签右对齐 （YouTube, Facebook, Metacafe）
* 30%的注册表单使用顶端对齐（Behance.net, Wufoo, Tickspot, Mixx, DZone）
* 29%使用的是左对齐（(Digg, Ning, Wykop.pl, 43things, StudiVZ）

根据“Matteo Penzo的标签放置研究结果（Matteo Penzo’s label placement research）”（1996）和“Luke Wroblewski的发现（Luke Wroblewski’s findings）”（PDF），右对齐由于几乎不需要眼睛的注视，能最大的减少完成的时间。如果你想要达到相同的目的但是只有一块受实际区域制约的垂直屏幕，标签顶端对齐则会更好一些。如果你想让用户了解标签的内容，左对齐则是最好的。

2.6有多少必填区域？

当进行一个调查时，我们已经注意到表单中的必填项越来越少了。几年前，设计师要求访问者填写他们的姓名、地址、城市和个人兴趣，但现在仅仅只需要登录名、密码和确认密码。

我们发现54%的表单要求用户最多填写5个输入框（其中6%的网站在使用服务前根本不需要注册）。34%的表单使用6-8个输入框，然而有12%的网站顶着用户的忍耐度让他们完成超过9个的必填项。

2.7有多少可选项？

和上面发现的类似，我们注意到大多数网站避免可选项并且要求用户在完成注册流程之后补全可选项。其中62%的表单根本就没有可选项，还有98%的表单有少于5个的可选项。

2.8垂直或者水平的安排区域

在这个方面，垂直无阻碍延伸的垂直布局区域是注册表单表现出强大趋势。86%的网站把输入框垂直布局。除此以外，15%的布局更强调利用漂亮且吸引人的视觉设计来让访问者在填写表单时感到更舒适。

Box.net提供了一个简单的垂直布局的输入区域。当用户输入数据的时候，他们的眼睛固定在纵轴输入框左侧的交叉点上。

Mint是一个横向布局的注册表单。当用户输入数据的时候，他们的眼睛需要跳来跳出。

3、表单的功能性

3.1.Hover,active,focus – 使用中的效果?

为了提高表单的完成率，设计师试图避免各种各样的分散因素，并且提供一个清晰明确并且简单的web表单。这就是为什么任何视觉效果需要非常适当地使用的原因。

* 84%的web表单没有任何种类的hover、active或者focus的效果
* 16%使用非常细微的鼠标上移的效果

3.2. 帮助，支持，工具技巧：静态还是动态的？

有时候，输入区域的标签不够明确，但是用户却需要足够理解才能提供这些信息。用户名适用哪些字符格式？密码的字符数限制是多少？提供的Email地址会不会自动变成登录名使用？

用户通过建议和技巧的帮助最小化地减少输入框重新考虑的次数。而且，没有比虽然输入的内容看上去完全正确，但是输入框却不接受的情况更恼怒的了。为了避免这个问题，设计师（通常）使用不引人注目但清晰的建议提示。

调查报告中57%的web表单只有 “静态”的帮助提示，这些帮助提示只是之前假定好的一些和用户有关的提示信息；这些提示被明显地放在输入框的旁边。10%的操作提示通常是在一些帮助图标被点击之后或者用户输入信息时才会出现的。

3.3．帮助，支持，操作提示：应该放在什么位置？

当在为用户提供帮助时，一定要确定帮助是简单地提示，并且可以方便地被找到和理解。这是确保用户通过帮助提示不犯错误地完成表单的决定性因素。为了达到这个目标，你需要知道用户希望这些帮助在什么地方出现。所以，这些帮助和提示通常被放在表单的什么位置呢？

如果帮助提示出现的话，它们会出现在…

* 在输入区域下面（57%）
* 在输入区域的右侧（26%）
* 在输入区域的上方（13%）
* 在输入区域的左侧（4%）

我们注意到提示信息直接放在输入框下方是一个强烈的趋势。通常这类帮助提示会有稍微不同的色彩，大部分情况比主要内容要浅一些。

3.4.输入确认：静态的还是Ajax动态？

去年一整年，很多网站为了和用户进行互动，看上去似乎确实充满了Ajax的应用，但Ajax在流行网站服务中仍然还没有设法达到临界点。令人惊讶的是，我们不能认清Ajax的趋势。用户在输入完所有信息点击提交按钮的“经典”确认技术依然比Javascript的实时确认要来的流行。

根据研究：

* 30%的表单只在表单顶部显示一条错误信息。（没有提示哪个输入框有问题）
* 29%的表单会在输入框旁边提示相应的操作帮助（顶部没有提供错误信息）
* 25%的表单同时使用错误信息和输入框提示。
* 22%的表单利用Ajax的实时确认来进行提示。
* 14%利用Javascript的错误提醒。
* 1%的表单是用系统信息提醒，并且给出“后退”链接。

3.5．错误信息的设计

正如你所看到的，我们已经识别出6种不同类型的错误提示。显而易见，14%的表单仍旧使用Javascript错误窗口来传达问题（例如，YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex，看下面的截图），然而只有22%使用Ajax确认（通常用来确认用户名的有效性）。当然也显然的是没有一个网站是没有任何确认的。

Newsvine使用Javascript错误窗口来传达问题。

通常设计师试图报告错误的使用方法。a、在点击提交按钮之后显示错误信息；b、在视觉上高光“不正确”的输入框。第一种错误情况通常会作为一条信息在页面的顶部（表单之前）显示出来。第二种情况通常是把错误的输入框的边框色彩和输入的标签进行高光（大部分情况是红色的字体以及红色的背景色）。

有时候设计师合并两种技术并且利用输入区域高光错误信息的方法。例如，看一下Ning结合两种技术的注册表单

通常，红色被用于标示错误；但是在这种情况下就没有必要了。当表单完成时，Tickspot, Mixx.com和Furl使用黄色来表示遇到的问题。

不过，如果有任意一种色彩来表示注册成功的话，它应该就是绿色，97%的网站表示成功的视觉就是用绿色的。

3.6有必要确认Email吗？

只有18%的网站需要确认Email（例如，Odeo, Ning）。我们实在没有任何理由让用户重复输入email地址，毕竟用户能够看到他们输的是什么，因为email地址的区域不像是密码区域那样是以星状显示。

3.7有必要去确认密码吗？

当用户看不到自己所输的内容（他们看到的是以星号代替的）时让他们确认输入感觉上是有理由的。但是很多网站为了缩短完成注册表单的时间而去掉二次确认的步骤。

72%的情况是有必要确认密码的，但是许多例如Facebook，Friendster，LinkedIn, Stumbleupon, Pownce 和 Twitter的网站都不要求确认密码。

3.8. 需要使用校验码吗？

如果校验码去掉的话用户肯定很开心，但是实际上校验码却是必要的，因为网站需要防止垃圾注册软件创建很多垃圾帐户，不然他们需要不停地在数据库中过滤掉这些账户。

根据我们的调查：

* 52%的网站没有使用校验码。
* 39%的网站是不能在不刷新页面的情况下实时刷新校验码的，这个实在是在可用性上非常的糟糕的一件事。

但是我们还是不能看清注册表单是否需要校验码的趋势。任何情况下，如果你使用校验码，请确定它是易可读的，或者在不可读的情况用户可以实时刷新校验码的。一些网站没有提供实时刷新校验码的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能够让校验码变成可以听的，当它很难被识别的时候。

3.9.需要使用取消按钮吗？

当我们在思考设计表单时一些认为会碰到的问题时，我们期望注册表单没有取消按钮，因为毕竟所有选项都已经填写好了，对于用户来讲就没有太大的意义去退出这个表单。然而我们在一定程度上错了。

只有8%的情况使用了取消按钮，这些情况中的一些取消按钮正好出现在“条款和协议”的下面（例如，Zoho Writer）。所以如果用户不同意服务条款，他们会退出这个流程。另一方面，一些服务在注册之前给出了一个支付方案（例如，Crazyegg）。在这种情况下用户选择错了支付方案时他们需要利用取消按钮返回并重新选择另外更好的支付方案。

除此以外：我们还是不明白为什么Dzone要把取消按钮放在注册表单的左侧。

如果使用取消按钮的话，有4%的情况是放在提交按钮的右侧。在这些网站中观察发现，取消和提交按钮没有非常强烈的视觉区别，而且还被挨在一起。从可用性观点上去看，把主要动作和次要动作用视觉区分开来并且用明确的空隙去区别它们是更有意义的。

3.10. 提交按钮的对齐方式

考虑到表单的样式，把提交按钮左对齐、右对齐或者放在中间是有实际意义的。有56%的设计师把提交按钮左对齐，第二位是26%的把按钮居中对齐。

右对齐的提交按钮依然比较流行（17%），但是一般都是起到需要进行下一步操作时的指示作用。在这些情况中提交按钮经常是以“继续”或者“下一步”为标题的。理由是：通常桌面软件中的“下一步”按钮就是放在右侧的。

3.11. 感谢信息

* 几年前，大多数服务在成功注册之后会提供一个简单，基础的感谢信息（通常还带有一个登录的链接），现在大多数站点都试图去激发用户立刻探索一下他们的服务。
* 45%的网站要求用户在完成注册之后提供更多的信息，在他们的网站上找到自己的朋友，或者邀请用户的朋友来使用他们的网站。
* 33%的表单会用友好并具有吸引力的语气指出 “接下来要去地方”（网站功能的探索）。
* 4%的网站提供了一个基础的“谢谢你”的消息。
* 2%是直接跳转到首页。

更多的发现

* 18%的注册表单旁边都会有登录表单或者登录连接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
* 78%的注册表单没有用星号或者高光去表示必选框；大多数情况无论星号或者其他形式的高光都不会被使用。
* 9%的注册表单用流程指示来告诉用户他们进行到哪一步了，并且告诉他们哪些步骤是完成注册的必填项。
* 85%的站点更喜欢用尽可能简单的web表单。
* 区域通常都是用空白区来群组和拆分的，有时边框的用途也和空白区一样（22%），还有9%的情况是利用不同的背景色来区分。
* 99%的案例中都是用到标签索引（除了Habrahabr）
* 24%的表单使用谈话式的语气，试图通过标示的对话达到用户所需。在这种环境中通常使用类似“你叫什么？”，“你的Email请告诉我一下？”或者“我想要……”等非正式的语句。
* 38%的网站宁可毅然选择正式商务的语气，友好地让用户填写所需的信息。（例如，“您的用户名”，“确认密码”等等）
* 38%的网站使用系统语言，用户被要求“登录”，“用户密码”，“地址”等等。

总结

* 注册链接的标题大多数是“sign up”（40%）并且被放在右上角。
* 注册表单为了避免分散用户的注意力而使用简单的样式。
* 93%的注册表单是单页表单。
* 41%的注册表单通过解释注册的优势来吸引用户注册。
* 62%的输入框标题是通过加粗高亮的。
* 标签不是都排成一条直线的。
* 设计师试图不用必填项和可选项。
* 86%的注册表单更喜欢用垂直布局的表单。
* 注册表单没有任何hover,active或者focus的特效（84%）。
* 提示和帮助不管是静态（57%）或者动态（33%）都是出现在输入框下方（57%）或者右侧(26%)。
* 状态确认和动态确认一样流行。当然Ajax不是趋势
* 82%不需要email确认
* 72%需要密码确认
* 校验码可用（48%）可不用（52%）
* 92%不用取消按钮
* 提交按钮是左对齐（56%）或者居中对齐（26%）
* 感谢信息激发用户继续探索网站的服务（45%）

原文地址：

http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

表单功能插件

Elastic – Make your textareas grow

这个jQuery插件让你textareas表单域增长和缩小，以适应它的内容。它的灵感来自于Facebook 的 textareas 域。
Elastic – Make your textareas grow »

jQuery “Highlight” Plugin

高亮区可以提高表单的可用性，突出页面上的交互元素。其主要是在表单中使用，但它也可用于表格，列表，或任何您指定的元素。
jQuery “Highlight” Plugin »

Autotab: jQuery Auto-Tabbing and Filtering

Autotab是一个jQuery插件，它提供的自动切换和过滤表单域中的文本域。一旦输入的字符串达到了已定义的文本长度，它会自动切换到自动设置的目标元素。
Autotab: jQuery Auto-Tabbing and Filtering »

Ajax Fancy Captcha

Ajax Fancy Captcha通过新页面帮助您保护页面远离机器人及垃圾邮件发送者的攻击，仅仅是通过很“人性化的验证”实现。这是通过将指定项拖拽到一个圆圈中实现的。
Ajax Fancy Captcha »

jQuery NobleCount

NobleCount可以动态地将textarea域中剩余字符的数目显示在本文中，Twitter风格。
jQuery NobleCount »

Password Strength Indicator and Generator

Password Strength Indicator and Generator 插件允许您设置元素的类，这样您就可以图形化显示密码的强度。
Password Strength Indicator and Generator »

FormToWizard Plugin

FormToWizard 插件允许您以“依次向左”的步骤实现表单信息提交。
FormToWizard Plugin »

Sliding Labels – jQuery Form Plugin

Sliding Labels – jQuery Form Plugin »

ToggleVal

ToggleVal会让您选择以不同的方式来填充表单文本字段（某些不同的方式），当接收和失去焦点的时候会自动切换至默认值。
ToggleVal »

jQuery AlphaNumeric

jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.
jQuery AlphaNumeric »

Form Encyription and Password Security

jCryption

jCryption is a JavaScript HTML-Form encryption plugin, which encrypts the POST/GET data submitted by forms.
Normally, when you submit a form, data will be sent in plain text if no SSL is used. But SSL is not supported by every webhost nor it’s easy to install/apply at times. So in this situation the jCryption plugin helps you to encrypt your data with ease.
jCryption »

Password Validation Plugin

This plugin offers a function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional) and gives a custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating.
Password Validation Plugin »

Password Strength – Estimates brute force time

Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password. It makes the assumption that it is possible to test 2800 million passwords per second.
Password Strength »

Password Strength Meter v2

The Password Strength Meter works by presenting a global variable score and at the end of the algorithm the plugin will decide the passwords strength according to the score value.
Password Strength Meter v2 »

Form Mask Plugin

Masked Input Plugin

The Masked Input Plugin allows a user to easily enter fixed width input fields where you would like them to enter the data in a certain format (dates,phone numbers, etc).
Masked Input Plugin »

autoNumeric()

autoNumeric() is a flexible International numeric formatter, that will automatically place a thousand separator as you type and supports nine different rounding methods.
autoNumeric() »

Form Upload Plugins

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and can use any element to show the file selection window.
AJAX Upload »

jqUploader: jQuery Plugin for File Upload and Progressbar

jqUploader is a plugin that substitutes the html file input fields with a flash-based file upload widget, allowing you to display a progressbar and percentage.
jqUploader »

Uploadify

Uploadify is a plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
Uploadify »

jQuery Uploadprogress Plugin

This plugin will augment a standard file upload form with a transparent background upload and add a progress meter that will keep you graphically informed.
jQuery Uploadprogress »

Form Skinning and Customisation

jQuery Checkbox

The jQuery Checkbox plugin is a lightweight custom styled checkbox implementation that can also work with radio buttons.
jQuery Checkbox »

Jqtransform – jQuery form plugin

This plugin is a jQuery styling plugin which allows you to skin form elements with relative ease.
Jqtransform »

In-Field Labels jQuery Plugin

This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
In-Field Labels jQuery Plugin »

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
Niceforms »

jNice

jNice makes it easy to style rough and simple html forms into beautiful web forms, checkboxes, input elements and selectboxes by creating custom looking form elements, that function just like normal form elements.
jNice »

Uniform – Sexy forms with jQuery

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Uniform »

prettyCheckboxes

prettyCheckboxes is for developers who wants to maintain a consistent style for checkboxes across all browsers. By using this script you wont loose any regular input usability.
prettyCheckboxes »

Form Select and Combo Boxes

jquery.combobox

jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).
jquery.combobox »

JavaScript Image Combobox

The fully skinnable Image Combobox plugin allows you to add an icon with each option that works with your existing “select” element.
JavaScript Image Combobox »

SelectBox Plug-in

SelectBox Plug-in »

Two Sided Multi Selector

This plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.
Two Sided Multi Selector »

flexselect

flexselect takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.
flexselect »

Form Time and Date Pickers

jQuery.timepickr.js

jQuery.timepickr.js has been developed in a attempt to make the process of inputing time in a form as easy and natural as possible.
jQuery.timepickr.js »

DatePicker

DatePicker is a feature rich and easy to customize plugin that allows for single, multiple or range selection dates.
DatePicker »

jQuery datePicker

This is a clean, flexible and unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages.
jQuery datePicker »

jQuery Week Calendar

The jQuery Week Calendar plugin provides a simple and flexible way of including a weekly calendar in your application and has been inspired by other online weekly calendars such as Google calendar.
jQuery Week Calendar »

Form Auto-Suggest

AutoSuggest

AutoSuggest is a lightweight jQuery plugin that will will dynamically create all the HTML elements that is needed for turning any regular text input box into an auto-complete box.
AutoSuggest »

Autocomplete

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
Autocomplete »

Ajax Autocomplete

Ajax Autocomplete allows you to easily create autocomplete/autosuggest boxes for text input fields with every query result being cached and pulled from local cache for the same repeating query. If there are no results for a particular query it stops sending requests to the server for other queries with the same root.
Ajax Autocomplete »

FaceBook Like – jQuery and autosuggest Search Engine

FaceBook Like is a powerful jQuery plugin that transform an input field into a real time autocompletion search engine, designed, as the name suggests, similiar to the one on Facebook.
FaceBook LikePlugin »

Form Validation Plugins

A jQuery inline form validation, because validation is a mess

When an error needs to be displayed, this script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corners and shadows are pure CSS3 and degrade well in non compliant browsers.

Validation

The Validation plugin is one of the oldest jQuery plugins (started in July 2006) available that has proved itself due to reliabilty, ease of use and extensive docs.
Validation »

Highly Customizable Yet Simple Form Validation

With this highly customizable plugin the user can set his own class to define the rule, set events onError and OnValid for a particular class and you can also add their own effects, may be jquery animate().
Highly Customizable Form Validation »

LiveValidation – Validation as you type

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time.
LiveValidation »

Ketchup Plugin

Ketchup Plugin is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.
Ketchup Plugin »

jTip – The Jquery Tool Tip

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.
jTip »

jQuery Live Form Validation

This plugin helps you to easily create form validations with high flexibility and is a packaged with a huge set of options.
jQuery Live Form Validation »

Valid8 – An input field validation plugin

Valid8 solves both simple and complex validation scenarios. Everything from a basic required field to regular expressions, ajax requests and arbitrary javascript functions.
Valid8 – An input field validation plugin »

jVal – jQuery Form Field Validation Plugin

jVal is a jQuery form field validation plugin that provides an appealing animated message flyout that doesn’t impede form layout/design while being user-friendly.
jVal »

The Original jQuery Plugin

jQuery Form Plugin

And if all of the rest of the plugins on this page can’t help, you can always rely on the original jQuery form plugin: jQuery Form Plugin »

原文：http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
翻译：http://www.iwanna.cn/archives/2010/07/08/4164/

今天我们来看看提升表格功能和美观的几种方式。我们经常会在网上的价格页上看到表格的应用，因此主要以该种表 单为例。请记住这些原则可以应用到任意类型的信息列表上（不仅限于 <table>).

垂直，水平或矩阵？Vertical, Horizontal or Matrix?

一如以往，我们从最明显的地方开始。第一步是决定表格的整体结构。结构取决于呈现数据的类型和复杂性。选择 垂直的列还是水平行，通常取决于个人偏好。大致规划下表单的内容，然后决定采取哪种方法能更好地传递信息。很显然，如果信息包含多变量，那么选择矩阵来表示。下面分别以几个简单案例来开始。

垂直

水平

矩阵

从Excel中开始Start in Excel

希望这是我第一次也是最后一次建议用Microsoft Office来进行相关设计。事实上，表格确实很容易用Excel来完成，这正是Excel的强项。用HTML来组织结构需要写复杂代码，通常会比Excel耗时。

我偶然发现了一个小的web应用程序：Tableizer ，它可以把Excel里的表格粘贴进来转换成HTML。利用这种方式你仍然需要自己写一些样式，但是会节省前期的表格构建时间。

Tableizer

使用表格生成器Use a Table Generator

痛恨Excel吗？别急，我也是。如果你想节省自己生成简单结构的HTML表格时间，网上有成千上万的表格生成器可以选用。请注意我说的是“简单结构”。不要以为用了这些生成器你就什么都不需要做了。

这里有几款简单的免费表格生成器：

• QuackIt
• Table Generator
• Kotatsu
• Spectrum Research

一个小样式走了好长一段路A Little Styling Goes a Long Way

现在你已经有了一个简单的表格，下面需要加一些CSS.当然你可以花大量时间选用各种样式。只需要记住，即使一 点点的颜色和字体样式都可以大幅度提高表格的可读性和吸引力。

这里有一些如何正确给表格添加样式的指南。

CSS的技巧：利用基本的CSS样式表格

Veerle: 一个CSS样式表格

增加特征组Add a Featured Section

这种做法在价格列表里很常见，也适用于其他的表格。看看表格的信息是否有必要让浏览者的注意力集中到某个特 定区域。用于显示属性的最佳值或者某个常用要素，用不同的颜色和/或不同的大小来区分。

有多种方法可以实现这种方式。下面举例说明几则：

不同颜色

不同大小

不同颜色和大小

对信息进行排序Make the Information Sortable

如果表格信息很多，分成几列，可以对列进行排序，用户可以选择按他们希望的方式浏览。 Mint.com对交易列表进行了排序，用户可以很容易地从按日期浏览切换到按种类浏览，从而能比较出哪一块你愿意花很多钱。如上截图所示，显然我更喜欢吃油腻的快餐。

下面是两种对表格排序的不同方法:

• 用Ajax (WoorkUp)对表格行排序
• 表格排序 JavaScript (Yoast)

使用图标Use Icons

我在上面提到，表格的信息设计要点是让用户第一眼就能看明白。通过减少必要的阅读，精心设计的图标能够提高浏览速度，增加用户对表格信息的理解。

小心这也是个双刃剑。复杂的图标也会让用户迷惑，不知道你究竟要表达什么。

增加斑马条纹Add Zebra Stripes

这是一个非常基本的概念，可以追溯到信息表格的存在。加入交替行颜色可以帮助用户集中视线，把在边上或者底 部设定好的分类信息和表格中心的浮动信息关联在一起。这个简单的技术可以增加大小表格的可读性。这确实是一个好的经验法则，如果你的表格需要用户关联分开的信息，那么始终包含斑马线（或其他视觉辅助）。

下面是一些给表格增加斑马线的免费资源：

• Styling Zebra Striped Tables With CSS (CSS Newbie)
• MooTools Zebra Table Plugin (David Walsh)
• PHP Zebra Striping a Table (CSS-Tricks)
• jQuery Zebra Stripe a Table (CSS-Tricks)

为Web 2.0做好准备

闪亮的web 2.0 样式设计可能有点过度使用。但是这确实可以很快抓住眼球。我绝对不建议对已经很复杂的表格增加太多冗余的花哨耀眼的元素，在这种情况下，需要选择简单的方式。然而，如果你需要设计一个只有几项的小表格，那么也不妨让它看起来神奇一点。

极简主义

不喜欢上面的耀眼web 2.0样式？没关系，还有一种很强的观点认为应该减少表格的图形。这种做法可以让用户没有任何干扰的只关注内容。使用干净细微的网格线（或没有线条），简单的字体和颜色，可以很好的和背景形成对比。

增加搜索功能Add a Search Feature

有时候仅仅增加排序功能是不够的。当你有成页的内容要排序的时候，最好的方法是使用搜索。

我找到的下面这两种表格过滤方法都采用了JavaScript。你还有其他的方式吗？

• jQuery Column Filters
• Cut & Paste HTML Table filter script

去除冗余Don’t Overload the Table with Redundancies

应用开发者喜欢通过表格显示其有多种强大的功能。然而，有时候设计者会给表格增加许多没用的多余的信息，而 他们本可以以更好的方式来显示。

看一下Invoice Machine的例子，表格里除了最上面的三种功能，其他功能的四个条目项都一样。该表格因此增加了没有必要的15行。解决方法可以通过一个简单的公告列表说明“我们的计划都包括以下功能”，用户能够快速看到，他们无论选择哪个计划，都会具备这些功能。表格只需要缩短成3-4行，用来显示不同的部分。我再次重申，表格应该让信息更易读。如果您的表格不符合这一目标则会适得其反。

创建可扩展区域Create Expandable Areas

另外一个功能是给表格的特定行增加展开功能。可以把大量内容放置到一个相对整齐的空间。一个简单的jQuery小 插件jExpand可以实现这个功能。具体实现可以查看 tutorial from jankoatwarpspeed

如果你的表格使用了展开功能，那么表头一定要设计得能让用户清晰地找到这个功能。不要让用户重重筛选才能找到他们所需要的信息。

高亮突出关联性Highlight Relationships

这种技术增加了复杂表格或矩阵的可读性。无论用户鼠标悬停到单元的列还是行，都会高亮突出整个单元。请见详例.

点击如下“Ask The CSS Guy”里的例子可以看到如何实现这种效果。

如何创建类似Orbitz’s airline的航空时刻和价格矩阵表格

增加动态选择效果Add a Dynamic Selection Effect

这里是“Ask The CSS Guy”里的另一个例子，允许用户选择表格的给定列（价格表），当前选择会高亮突出显示，并且能展开显示更多信息。这种方式和上一个例子是一致的，但是有不同的效果。查看demo 具体实现请点击：

创建类似Crazy Egg’s价格列表动态高亮列效果的表格

原文：http://article.yeeyan.org/view/155461/108136