8.3　可用性的提升

表单作为页面中最为常用的元素之一，提升它们可用性的结果只能是有益于用户。在这一部分中，我继续带领你探索两种常用的技术，它们常用来提高表单总体的可用性。

此外，你也有机会尝试使用JavaScript库来简化乏味无趣的DOM遍历和修改，提高可用性的操作也变得更容易。在这两种技术中我都选择使用jQuery JavaScript库（http://jquery.com），它特别擅长于DOM的遍历和修改。

8.3.1　悬停的说明

我们要讨论的第一条提高可用性的技术是把说明定位（悬停）在相关的字段内，并在字段得到焦点后隐藏。这个技术的目的有两种。第一，它清晰地给用户传达这个特定的字段需要填写什么内容；第二，它有助于节省字段及其说明所占据的物理空间。

在原有的表单上，你要为username和password两个字段增加新的悬停说明，产生如图8-3所示的结果。

但实现这个具体效果的JavaScript代码相当复杂。为了达到无缝结合需要了解很多细节。让我们来看看实现最终效果所需的部分细节。

第一，为了把说明定位于输入元素的顶端，必须先把label和input元素都用一个div包裹起来。可以用这个div把说明绝对定位在字段的顶端上。

第二，必须让说明在字段得到或失去焦点时恰如其分地隐藏（或显示）。此外，当用户离开字段后，需要检查字段是否输入了值。如果是，就不必再把说明显示出来了。

第三，如果字段本身带有默认值的，要保证说明不要显示出来。否则，用户会看到混乱的文本。

记住了这些，让我们来看看实现表单内悬停说明效果的所需代码，如代码清单8-15所示。

代码清单8-15  使用jQuery JavaScript库实现字段中的悬停说明

// 获取所有在class为hover的label（说明）后的input元素

$("label.hover+input")

      // 为input元素包裹一个div（class为hover-wrap）,

      // HTML大致如此：

      // <div class='hover-wrap'><input type="text" .../></div>

      .wrap("<div class='hover-wrap'></div>")

      // 当input元素得到焦点（无论是通过鼠标的点击还是通过键盘的敲击），隐藏label

      .focus(function(){

          $(this).prev().hide();

      })

      // 当用户离开input元素（并且没有输入文本）时，再次显示label

      .blur(function(){

          if ( !this.value ) $(this).prev().show()

      })

      // 遍历所有的input元素

      .each(function(){

          // 把label移动到<div class='hover-wrap'></div>内

          $(this).before( $(this).parent().prev() );

          // 如果表单带有默认值，确保label会自动隐藏

          if ( this.value ) $(this).prev().hide();

      });

但是这段独立的JavaScript还不足够实现具体的需求，你仍要增加CSS的样式化，以保证能把说明和字段放到恰当的位置上，如代码清单8-16所示。

代码清单8-16　CSS的样式化，以保证说明能够定位于相关的字段之上

div.hover-wrap {

      position: relative;

      display: inline;

}

div.hover-wrap input.invalid {

    border: 2px solid red;

}

div.hover-wrap ul.errors {

    display: none;

}

div.hover-wrap label.hover {

    position: absolute;

    top: -0.7em;

    left: 5px;

    color: #666;

}

不用太困难，你已经有效地改进了表单的可用性。使用这个技术，在节省屏幕空间的同时，你仍然能够给用户恰当的引导。这不失为一个双赢的方案。

8.3.2　标记必填字段

第二条技术是使用视觉化的提示标记必填字段。比较普遍的做法是使用红色星号标记必填字段，大部分的Web开发者都在他们的网站上采用。但是，增加额外的内容以引进星号是相当不语义的，所以并不鼓励这样做。相反，这是一个使用JavaScript增加可视化提示的好机会。这个技术的一个例子如图8-4所示。

为必填字段加上提示还需要注意的一个方面是，需要增加特定的可以引导用户的帮助文本。你可以使用title特性为用户提供一条提示，正确解释红色星号的含义，因为某些用户并不熟悉*号的意义。好了，实现这个改进相当简单，如代码清单8-17所示。

代码清单8-17　使用jQuery JavaScript库为必填字段的label增加上下文*号和帮助信息

// 获取所有有必填记号的字段

$("input.required")

      // 然后定位到前一个label

      .prev("label")

      // 改变label的光标让它更有用

      .css("cursor", "help")

      // 当用户悬停到*号上，显示解释

      .title( errMsg.required )

      // 最后，在label后增加*, 表示这是必填的

      .append(" <span class='required'>*</span>");

为显示恰当的样式，你需要标红这个新提示，如代码清单8-18所示。

 

代码清单8-18　为*号增加样式

label span.required {

      color: red;

}

增加可视化提示和使用悬停说明的结合有效改进了可用性，而且是通过分离式的JavaScript实现的。在一些特定应用程序内，会找到很多表单和字段的改进例子，而它们只需要简单的JavaScript就能实现。