Web表单在日常网络使用中扮演着重要的角色。如果你建立和/或运行网站，很可能你在里面有一个网页表单，无论是一个简单的联系表单还是一个丰富而强大的网页应用程序。有几种方法可以确保你的网页表单是为你的用户优化的。
这里有一些提示，以确保您的表单提交过程是用户友好的。
1.清晰地突出必填项
作为用户，提交了一个web表单，后来才发现你错过了必需的输入字段，这是很烦人的。突出显示必需字段的一个常见约定是在它们的标签旁边有一个星号(*)。显式地声明输入字段是必需的，或者该字段是可选的，这是一种安全的方法。
Zappos.com注册web表单用星号(*)突出显示必填字段。可选字段是显式声明的。
2.提供用户友好的和描述性错误消息
我敢肯定，当你在网页表单中犯了一个错误，所有的错误都是“你必须填写下面所有的必填项”，而他们实际上应该提供一个更具体的错误消息，比如“你忘记输入你的电子邮件地址”。在用户填写web表单时执行实时数据验证是解决模糊错误消息的好方法。例如，在填写完电子邮件地址输入字段后，web表单应立即检查其格式是否正确，如果不正确，则立即通知用户。
雅虎的报名表格甚至在表单提交之前就提供有意义的实时错误消息。阅读有关的最佳实践web表单中的提示和错误验证．
3.使用客户端(JavaScript)数据格式验证
使用JavaScript数据验证可以节省用户的时间，同时也减少了web服务器处理传入web表单提交所需的工作量。客户端错误验证允许您立即让用户知道他们犯了一个错误，而不是在他们提交表单之后。这对于任何不需要检查数据库的输入字段都很好;比如确保提供的电子邮件地址格式正确，或者电话号码只包含数字。
SurveyGizmo的注册表单让您知道您输入的电子邮件地址格式无效。
4.以视觉风格为重点的表单字段，让用户知道它们在哪里
确保您在视觉上设置了输入字段的样式，以便用户在哪个字段上显示非常明显。您可以通过使用CSS来实现这一点:专注伪类选择器。
Wufoo的网页表单通过赋予活动输入字段一个独特的背景来视觉化它。让输入字段至少有不同的边框颜色——默认情况下，网络浏览器会为你这样做，但要确保默认颜色与你的网站设计不同。
Chrome的默认样式为一个集中的输入字段是提供一个黄色边框。在Firefox中，它是一个淡蓝色边框。
5.清楚地展示进展
如果你的网页表单很大，跨越了多个页面(或有几个步骤)，确保你向用户提供持续的进度反馈，让他们知道他们还需要多少时间来完成网页表单提交过程。这在有许多问题的在线调查表单或电子商店的结帐过程等情况下很常见。它所需要的只是显示“5步中的第4步”，或者类似的东西。
如果他们一直点击“下一步”按钮，而不清楚什么时候会完成，他们很可能会比你希望的更早停止。
亚马逊的付款流程有4页。表格会告诉你你在哪里，还有多少需要填写。当然，更好的选择是缩短你的网页表单——但除了这个选项之外，至少要给网页表单用户一个他们在完成过程中处于什么位置的提示。
6.定期保存/缓存表单数据
经过多个页面或步骤的表单容易出现用户错误。为了避免数据丢失，您肯定希望实现一种方法来将用户的输入保存在会话或cookie变量中。这使得网页表单更具容错性，并提高了即使在用户导航离开网页等意外情况下，表单仍能完成的几率。
重新填写网页表单可能会打消用户填写的积极性。
7.抛弃默认的“提交”文本
不要让你的网页表单的提交按钮显示“提交”，而是让它提醒用户他们正在做什么，比如“现在注册”，或者更好的是，让用户知道填写这个表单的好处。
Basecamp的注册表单用更有用的内容取代了默认的“提交”文本。
8.你的“取消”键会让你分心
如果你在一家商店买一件新衬衫，售货员问你:“你确定吗?真的想买这件衬衫吗?“你会继续买这件衬衫吗?”可能不会。也许你会犹豫;售货员是不是告诉你这件衬衫你穿不好看?
网页表单也是如此;设置“取消”按钮可能会让你的用户在填写时三思而后行。
9.显示用户正确的输入格式
如果您要求用户输入特定的输入格式，例如电话号码或信用卡号码，请让他们知道您所期望的内容。如果密码必须有一定数量的字符，或者必须包含一定的字符组合，请清楚地描述这些要求。这减少了歧义，使填写表单更快。
Geico注册表格对他们期望的格式提供了明确的说明。
10.单列垂直形式更好
根据用户体验设计机构cxpartners的一项眼球追踪研究，向下扫描表单比从左向右扫描更可取。它可以减少你在填写表格时眼球运动的次数。
单列示例
Backpack的注册表单在一栏中垂直定向。
多列的例子
一个反例是，eBay的多栏注册网页表单要求用户从左到右，从上到下填写表单。
优秀的网页表单展示
为了获得灵感，这里有一些优秀的网页表单。
Alexandru Cohaniuc
Alexandru Cohaniuc的网页形式看起来绝对令人惊叹，就设计和功能而言。它清楚地让你知道他是否可以做自由职业，它有易于阅读的标签，有清晰易读的输入字段。
握自定义Facebook标签创造者
Grip 'd的自定义Facebook标签生成器可以让你确切地知道你所处的步骤，以及吸引用户注意力的大按钮，以继续完成生成自定义Facebook标签的过程。
Groupon
Groupon的网页表单清楚地让你知道你在注册的过程中处于什么位置。他们在有效地使用多步骤注册表单方面做得非常出色。
只有
KISSMetric的表单展示了一个很好的网页表单设计和JavaScript验证的例子。
当你犯了错误，你会马上知道的。
MobileMe登录
苹果的MobileMe登录表单就是表单设计的一个很好的例子。呼叫按钮是清晰的:专注表单字段上的样式清晰可见。
Web表单工具和资源
这里有一些处理web表单的资源和工具。
Wufoo
这个web应用程序允许您生成自己的表单，并为您提供必要的代码来将表单嵌入到您的网页中。他们为你处理分析，甚至支付!
手机畅通
jQuery插件，让您轻松地创建联系表单和反馈表单在您的网站上的任何地方。它非常容易使用，并提供了一个很好的结果。
用jQuery改变表单输入样式的焦点
这是一个教程，向您展示如何使用jQuery让您的用户知道他们目前在表单中的位置。
表单字段提示与CSS和JavaScript
一个教程，将教你如何显示表单提示时，用户点击一个字段。这是向用户显示电话号码和其他字段的特定格式的好方法。
量
一种方便地在用户使用JavaScript输入时提供实时字段验证的方法。
您可以配置它以任何您想要的方式工作。
