增强web表单可用性

表单是 Web 站点的交互中最重要的东西。它们收集访问者的信息，这些信息可以是登录表单的用户 ID 和口令，也可以是一个应用程序中的个人信息页面。要求访问者在一个文本框中键入信息，或者要求他们使用一个单选按钮或复选框选择一个选项等，这些与简单地点击一个超链接然后显示另一个 Web 页面来说，都强迫用户更高层次的参与。访问者这种更高层次的交互使得表单可用性成为 Web 构建人员需要关心的一个关键问题。

从可用性的角度上来讲，最坏的情况是一个访问者填写了一个表单，但是不能得到他们期望的结果（例如，登录失败，应用程序拒绝，或者数据库不能更新等）。这种失败的最常见的原因是访问者输入了不完整的或不正确的数据。然而，与其将这归咎为用户的错误，还不如将其看作一个可用性错误，然后纠正这些可用性方面的缺陷。我们的目标是使每一个用户在第一次使用时就能够正确填写信息然后成功提交。

好的表单设计包括很多方面；第一个方面是通过在后台处理表单数据来确定表单需要收集和扩展什么数据。本文集中在我们可以采取哪些方法来保证数据输入的准确性和完整性。

提供明确的指令
第一步是为访问者提供明确且完整的指令，精确且无二义地定义他们需要在表单中输入什么信息。然而，我们不需要在每个文本框或其它表单元素之后提供一段指令；在很多情况下，一个简单的标签（比如 Last Name 等）就已经足够了。

另一方面，一些表单元素需要更加详细的指令，要么用于确定需要的数据，要么帮助访问者以正确的格式输入数据。例如，访问者可能需要特殊的指令说明如何找到和输入信用卡后面的签名条上的安全代码。这是一些信用卡的相对来说比较新的特性，而且不同的信用卡和不同的 Web 站点描述它们时使用的术语也不尽相同，所以简单地在一个文本框后面放一个标签并不够。再复杂一点，代码通常由4到6个数字组成，而事实上只有最后三位才是有意义的。这种特定问题的一个比较好的解决方法是创建一个独立的指令页面，说明如何找到和输入安全代码，然后在表单域的后面放置一个指向指令页面的链接。这样就可以有一个完整的指令，里面还可以包括一个示例图像，同时又不会导致表单混乱。

确定必输域
在提交表单时，仅仅因为一个必输域没有输入内容而被拒绝是一个很让人沮丧的经历。这就是必须在一个表单上明确地标出必输项的原因。通常使用一个星号和/或一个显眼的颜色（比如红色）标出这些域。如果使用一个星号，那么要在页面的顶部提供一个对星号的解释，从而使访问者不至遗漏。

此外，不要单单依赖于颜色来标识必输域。有些用户可能是色盲，或者可能在使用黑白显示器查看我们的表单。

帮助访问者输入数据
要使数据输入尽可能地傻瓜。通常，这意味着尽量减少需要用户输入数据的文本框的使用，使用列表框替换它们，列表框允许访问者选择一个选项。列表框消除了访问者犯输入错误的可能性。

使用一个下拉列表框来选择美国邮政地址中一个州的双字母缩写，是一个比较好的例子。弹出日历是一个更精细的例子，访问者能够在日历上点击一个日期，然后日期会以正确的格式输入到表单中。

相反，需要访问者在一个文本框中输入城市、州和邮政编码，中间用空格和标点分开，是一个糟糕的例子。如果我们的数据库或其它应用程序需要以那种格式输入到一个域中的地址，那么我们可以尝试为访问者提供一个明确的指令，告诉他们如何填写表单。一个比较好的解决方法是为城市、州和邮政编码使用独立的表单域，然后在后台表单处理时将这些输入组合成一个数据字符串。这就意味着编写更多的代码，但是却提供了更好的可用性和并减少了错误，我认为值得这样做。

验证数据输入
即使我们使用了好的标签和指令来设计表单，也不是所有的用户在每次都会以准确、完整的信息提交表单。一个有效性验证脚本能够在表单数据被提交到数据库或应用程序之前，检测出信息是否遗漏或者其格式是否正确。

一般情况下，一个在点击表单的提交按钮时调用的脚本负责处理表单验证。验证脚本检查表单，以检验包含数据的必输域；而且根据脚本的逻辑，还可以测试域中内容的格式是否正确。例如，脚本可以检查一个电子邮件地址中是否具有一个 @ 字符。如果脚本检测出了问题，它将中止提交进程然后显示一个错误消息。

我们可以使用 JavaScript 或其它自己喜欢的脚本语言来创建自己的表单验证脚本，另外我们还可以使用很多现有的预制脚本。Dreamweaver用户可以使用几个扩展，通过鼠标点击来添加表单验证行为。从可用性的角度说，我们使用哪种代码来验证表单并不重要，重要的是要对表单使用某种验证，以阻止可检测的错误引起应用程序拒绝表单。如果表单数据在提交之后被拒绝，那么访问者通常就不得不乱填一些数据。通过中断表单提交，验证脚本允许访问者返回到表单页面，收集问题，然后以最少的麻烦重新提交表单。

创建有意义的错误消息
为了使一个表单验证脚本能够达到其目的，在遇到错误时显示的错误消息必须对访问者有意义。错误消息应该明确地指出包含错误的表单域，并提供修正那个问题的指令。

一个常见的问题是错误消息使用 HTML ID 属性指出引起问题的表单元素。不要让访问者去猜哪个域是 textbox1。错误消息应该像下面这个样子：“First Name 域缺少数据。”

使表单容易使用，这是我们的工作。表单可用性的一个重要方面是采取某种措施，以减少用户与表单交互时可能犯下的数据输入错误。错误控制工作应该包括以下几个方面，一是使用好的表单标签和指令来防止错误，再者是使用表单验证机制在表单提交到应用程序前捕获错误。

本文作者：Mbenichael Meadhra自 Web 问世之初便一直在这个行业工作。他参与编写的书籍已有30多本。