9.3　教程：基本表单扩展

在这个教程中，我们将为一个基本订购表单进行3个可用性改进，该表单由收集账单信息和配送信息的字段所组成。首先，在页面载入的时候，我们将把文本光标放在表单的第一个字段中。其次，我们将根据访问者做出的选择来关闭或恢复表单字段。最后，当表单的某个部分不需要的时候，我们将其整个隐藏起来（参见图9-4）。

图　9-4　使用JavaScript，可以增加Web表单的可用性并且增加交互式功能，例如隐藏不需要的字段和关闭不应该填充的字段

注意：参见1.3节中的“注意”部分以获取如何下载教程文件的信息。

本教程的订购表单页面的第一个字段收集了下订单的人的名字（如图9-4所示）。

为了使得表单更容易填写，页面载入的时候，我们把光标放入到这个字段中。

1.在文本编辑器中打开chapter09文件夹下的文件form.html。

这个文件已经包含了jQuery文件的一个链接以及$（document）.ready（）函数（参见6.4.1节）。这里有一个包含了两个部分的表单，一个部分收集账单信息，另一个部分收集配送信息（在继续之前，检查Web浏览器中的页面）。

第一步是聚焦到字段（实际上，也是教程的这一部分的唯一的步骤）。

2.在$（document）.ready（）函数后面的空行上单击，然后输入$（'#name'）.focus（）；，代码如下所示：

$（document）.ready（function（）{

$（'：text：frst'）.focus（）；

}）；//end ready（）

第一个字段有一个ID为name，因此，对该字段应用focus（）函数使得浏览器在这里放置一个插入点，这是很简单的事情。

保存文件并在Web浏览器中预览。

当页面载入的时候，第一个字段应该有一个闪烁的光标，意味着这个字段拥有了焦点，并且我们可以立即开始填写它。