我们对表格的本能厌恶源于不得不填写看似无穷无尽的纸质表格，其中许多表格都需要有表格内容填写的硕士学位才能在第一时间理解并正确填写。不幸的是，在线下世界中，如果回答错误，就意味着必须完整填写表格，然后重新发送，通常需要间隔几天。
在网上，我们不仅有机会无数次地重新提交表单，而且作为web开发人员，我们可以在使用web表单的不同阶段为人们提供更多相关的反馈。
通过提示和验证，我们可以创建比离线表单更友好的表单。在某些情况下，我们可以做出人们甚至可能享受填写。
网页表单中的提示
验证经常用于在发生错误时向用户提供关于他们应该输入哪些信息的响应。通过使用一些有用的提示，我们可以在他们输入名字之前提供大部分信息。通过在用户提交表单之前显示更多的信息，我们可以减少发生错误的机会。
提交前可获得的资料有三种形式:标签:这些信息应该快速描述应该输入哪些信息——可以是用户名、密码、电子邮件等。必选或可选信息:输入字段应该表示为必需的或可选的，通常用星号(*)或任何提示或基于文本的提示告诉表单用户不能让字段为空。帮助提示:帮助提示功能为用户提供关于如何格式化信息的额外提示。
例如，帮助提示可能会告诉用户密码要求是什么(如下所示)。
校准的标签
当然，所有信息都应该以一种与给定输入字段明确关联的方式放置，但标签的对齐实际上不仅会影响成功提交，还会影响完成的速度。标签的对齐通常是左、右或上;每一种对齐方式都有利有弊:上面的标签:将标签放在输入字段的顶部可以改善标签和字段之间的关联，但确实会给人一种表单较长的印象。正确的标签:在输入字段右侧的标签减少了网页表单的垂直空间，并改善了标签和输入之间的关联。
然而，正确的标签会降低网页表单的可读性和可浏览性。离开了标签:在表单字段左侧的标签可以使标签更容易阅读，也可以使web表单在垂直方向上更短。然而，它往往会影响标签与输入的关联。
选择表单中标签的对齐方式可以取决于你所创建的web表单的类型、可用的web表单空间以及在给定的情况下你更关心的缺点是什么。
标签内部的输入
有些表单会使用占位符在输入字段中指出合适的信息示例，但在某些情况下，当屏幕空间非常紧张时，开发人员会在输入字段中使用标签。对于较短的表单，这不会带来太多问题，但随着表单的增长，这就成为了一个问题。通过在输入中使用标签，这意味着一旦用户输入任何数据，标签就会消失，并且在提交之前或之后查看表单时无法返回。
只有当用户输入信息后，原始提示消失，仍然有足够的信息表明输入的目的或要求时，才应该使用输入中的提示。此外，如果使用错误，输入字段中的标签可能会带来麻烦，因为它们通常依赖于JavaScript等客户端脚本。对于输入中标签的缺点，一个潜在的解决方案是使用滑动标签技术(由csskarma提出)，其中标签移动到一侧，当用户聚焦并向字段中输入文本时，标签仍然可见。
然而，这种技术仍然不能解决空间的限制。
动态提示
如果空间非常紧张，或者每个输入字段旁边都有提示，表单看起来太杂乱，那么可以使它们具有动态性。当用户将注意力集中在输入字段上，或者当用户将鼠标悬停在位于输入字段附近的帮助图标上时，提示可以根据用户的操作显示为工具提示。使用动态提示可以交流更多的描述性信息，因为字符限制不受输入字段周围可用空间的限制。
Web表单中的数据验证
如果提示的使用足够且正确，大多数用户可能永远不会看到任何验证，但这并不意味着验证不重要。验证为许多用户提供了一个安全网，同时也提供了一个系统，以确保网站正在收集所需的正确信息。构建web的结构允许我们用两种方法验证用户输入:
服务器端验证
在使用服务器端验证时，用户输入的任何信息都被发送到服务器进行检查，而不是在个人计算机上本地发生的任何事情。除了使用Ajax服务器端表单验证外，这是一种较慢的验证形式，因为它要求用户首先提交表单，然后等待服务器验证数据，然后再重新加载页面以提供响应。然而，你失去的是速度，你获得的是安全性，因为这个过程不像客户端验证那样容易被绕过。
客户端验证
尽管HTML5将改变我们进行客户端验证的方式，但JavaScript是目前用于客户端验证的常用语言。因为用户可以在浏览器中禁用JavaScript，所以网站不能仅仅依靠JavaScript作为验证方法。相反，客户端验证应该被视为服务器端验证之上的额外一层。
实时验证
实时验证是客户端验证允许我们解决的服务器端验证缺点之一。虽然客户端验证也可以通过提交按钮激活，但在用户向表单中输入数据时，也可以使用实时验证。实时验证可以使用JavaScript对用户操作提供即时响应。
因此，用户不必填写整个表单并按下提交，而是在输入时立即得到响应，以便在必要时立即进行更正。实时验证的一个例子是密码强度指示器，每次击键都会触发验证并发送响应，向用户表明网站认为他们选择的密码有多弱或多强。
Web表单验证的优点、缺点和丑陋
认可并不都是美好的。
良好的
我们为什么要使用验证呢?这并不是最简单的代码，特别是当你通过使用客户端和服务器端web表单验证来复制工作时。对用户:当然，很明显，我们为用户进行验证。
通过正确使用验证，我们创建了一个用户友好的表单，使该过程尽可能简单和快速。获取正确的信息:它可能为用户创造一个可用的体验，但它也确保网站接收到所需的正确信息，并以必要的格式存储在数据库中以供将来使用。为垃圾邮件保护:通过验证特定的信息，我们可以去掉表单可能收到的一些垃圾邮件。
但是，请记住，我们为垃圾邮件设置的任何验证都不应该影响用户体验。记住，用户并不关心您可能收到的垃圾邮件的级别。
坏
不过，验证并不总是好的，因为开发人员和客户端都知道滥用表单，忘记了表单的最初目的，创建了一些不太用户友好的东西:不同寻常的必填字段:我们输入可选字段，而不是创建只包含用户真正需要的信息的表单。有时这些对用户是有用的，例如额外的地址字段或额外的信息文本区域。在其他情况下，它们可能帮助网站所有者收集诸如“您是从哪里听说我们的?”当验证需要这些传统的可选字段时，它们会为完成创建障碍，并导致用户想知道为什么要向它们请求此类信息。
严格的格式:在可能的情况下，我们将确保用户以我们期望的格式输入信息。但有时，验证做得太过了，将用户限制在给定的格式中，导致了不应该存在的验证错误。这通常会迫使用户跨越重重障碍，以满足为适应系统而制定的特定标准。
一个例子是要求电话号码中不能有空格。这应该由代码而不是用户来修改。另一个例子是对你需要的密码类型有太多的要求。
“必须有三个数字，一个大写字母，长度必须在6-12个字符之间”)。
丑陋的
我们都知道，网络上的一些恶意用户通过搞垮网站来恶作剧。当开发人员对他们的验证稍有松懈时，就会让其中一些人有机会滥用漏洞，比如跨站点脚本编制(缩写为XSS)来破坏网站或获得他们不应该访问的区域或信息。这是网络不幸的现实，可以通过验证技术来解决。
通过保护您的网站免受此类攻击，您可以确保网站始终为您和您的用户而活，并且您的用户的信息始终是安全的。有关XSS的更多信息，请访问ha.ckers.org上的XSS(跨站脚本)小抄。
验证响应
仅仅输出提示和验证是不够的。设计也发挥了作用，帮助沟通和加强任何验证输出的信息。许多不同的因素有助于确保用户在第一次尝试时遇到错误，可以更正提交并在第二次尝试时发送表单。
颜色
为了强化信息，颜色是一个很好的设计元素。通常，红色用于错误实例，绿色用于成功实例。即使在用户阅读表单验证结果的任何文本响应之前，颜色的使用也会清楚地向用户指示。
颜色可以在网页表单中以多种方式使用，以突出特定的错误。除了对任何验证响应使用颜色外，您还可以通过使用颜色更改给定输入字段的标签、边框或背景来加强特定输入的错误。然而，最好是取得平衡，因为我们只是试图向用户清楚地指出错误，而不是用错误来打击他们。
尽管颜色是传达特定信息的有用工具，但出于可访问性的原因，它永远不能独立地用来传达信息。如果颜色是指示错误发生的唯一方法，那么盲人、低视力和色盲用户在确定错误发生的位置时会出现问题。
定位
如何放置验证元素也会影响表单的可用性，特别是对于较长的表单:页面上方:这是一个放置在页面顶部的验证响应，最常见的情况是直接位于表单上方。对于不使用Ajax的服务器端验证，如果操作正确，这对屏幕阅读器用户来说非常好，因为它可以成为页面重新加载时读取的第一个元素。内联:任何靠近发生错误的输入的验证都被认为是“内联”的。
这对于实时验证和较长的web表单都很有效。
如果你的表格很长，但在折叠下面消失了，那么使用这两种技术是一个好主意。例如，如果表单底部出现了错误，并且您同时使用了这两种技术，那么在滚动表单时，用户可能很快就会看到一个响应，明确地提示他们改正错误。
如果您正在使用实时验证，那么就没有必要使用页面顶部响应，因为在这种情况下用户只需要内联验证。
使用图标和视觉提示
尽管图标不像颜色那样能立即被识别出来，但在用户有机会阅读任何文本响应之前，图标又是一种传达信息的方式。图标是显示内联验证的一种很好的方式，在这种情况下屏幕面积最小，但只能用于加强页面顶部的文本响应。在验证中使用的好图标的例子是表示成功的勾号(复选标记)，或表示错误的红叉(X)。
验证响应的其他样式化技术
还有很多其他样式元素可以添加到特定的响应中，如边框、字体权重、背景等。这些方法的使用取决于错误的定位，如何显示错误，以及什么适合你的网站设计。虽然任何回复信息都应该与周围的元素有一定程度的区别，以便被识别，但没有理由不让它们与网站设计的其他部分共生。
Web表单验证响应消息
样式化和定位只能帮助指示发生了错误以及错误发生的位置。网站输出的文本响应向用户传达了必要的信息。任何错误消息都应该尽可能地传达以下信息:列出所有错误:为了确保用户在下次尝试时获得表单，为了方便，所有错误都应该紧密地显示在一起。
这允许用户访问该列表，而不是在整个web表单中查找它。错误在哪里:错误响应应该提到错误与哪个输入字段有关。当引用一个输入时，您通常会使用该输入的标签，因为这是用户识别特定输入的最佳方式。
如何修复错误:如果错误很复杂——比简单地让用户知道他们遗漏了一个必填字段要复杂得多——最好与他们交流解决方案。如果电话号码不能接受字母字符，则告诉用户。如果用户没有以正确的格式输入他们的电子邮件地址，您可以向他们展示正确格式的示例。
粘性的表单信息
当提交有错误的表单时，用户希望表单能够调整之前的响应，而不是不得不再次填写整个表单。不让表单保留以前的用户条目可能会导致表单被删除。确保用户输入的数据是“粘性的”，可以让他们更容易理解所发生的错误。
不要使用警告对话框进行验证响应
主要用于客户端验证，警告对话框向用户提出问题，通常会造成完成任务的障碍。以下是一些原因:警告对话框是临时的:当显示警报框时，必须先关闭警报框，然后再返回表单。一旦关闭，再次查看错误的唯一方法是重新提交表单。
这样用户就没有可以回头引用的信息。除非你专门迎合那些具有非凡记忆能力的人，否则可以有把握地说，大多数Web用户的注意力和记忆持续时间都很短。警告对话框对于有多个错误的提交表单是很麻烦的:在使用警告框和弹出窗口时，通常只显示发现的第一个错误，而不是显示完整的错误列表。
然后，用户多次重新提交表单，以发现多个不同的错误。警报对话框是纯文本的:警报框只能显示用于传递消息的文本，因此不能使用其他设计元素根据错误或成功消息创建不同的样式。
不要将错误页用于验证响应
另一种糟糕的验证形式是使用错误页面。在这里，表单将信息发送到单独的页面进行验证，存在的任何错误都将在此页面上输出，而不需要原始表单。这意味着用户必须导航回表单，在这里他们可能会丢失之前输入的信息，以及需要更正的错误。
带有提示和验证的好表单示例
结论
对于开发人员和用户来说，表单可能是任何网站的一个复杂功能，但它们是用户和网站可以相互交互的唯一方法。这就是为什么要仔细考虑网页表单——不可用的表单会严重影响你的业务和利润。有时，即使在设计最好的网站上，花在网页表单和验证设计上的精力也是微不足道的。
仅仅输出一个文本错误是不够的——您需要确保它在内容和设计上提供足够的信息，以实现最佳的用户体验。因此，与其把表单和验证看作是另一件需要完成的事情，不如考虑花更多的时间来创建与网站其他部分一样完美的表单。
相关内容
- 25个时尚的Web表单示例
- 五个简单但重要的Web可用性技巧
- 你今天就可以做的10个简单的网页辅助技巧
关于作者
