我的书签
添加书签
移除书签第9章 扩展Web表单
从Web诞生开始，表单就使得Web站点能够收集来自访问者的信息。表单可以收集一个新闻组的E-mail地址，收集完成一次在线销售的配送信息，或者直接接收访问者反馈。表单还要求站点的访问者思考：阅读标签、录入信息、做出选择等。由于一些站点完全依赖于接收表单数据（如果人们不使用表单来订购图书，Amazon恐怕要不了多久就要关门了），Web设计者需要知道如何让表单尽可能容易地使用。幸运的是，JavaScript为表单注入交互功能的能力，可以帮助我们构建容易使用并且确保更精确的访问者反馈的表单。
9.1 理解表单
HTML提供了各种标签来构建如图9-1所示的一个表单。最重要的标签是＜form＞标签，它定义了表单的开始（开始＜form＞标签）和结束（结束＜/form＞标签）。它还指明了表单用来发送数据的方法是什么（post或get），并且指明了表单数据应该发送到Web表单上的何处。
可以使用＜input＞、＜textarea＞或＜select＞标签创建真正的表单控件，包括按钮、文本字段和菜单。大多数的表单元素都使用了＜input＞标签。例如，文本字段、密码字段、单选按钮、复选框和提交按钮都拥有＜input＞标签，并且我们通过type属性来指定要使用具体哪种表单元素。例如，要使用＜input＞标签创建一个文本字段，并将其type属性设置为text：
图 9-1 一个基本的表单可以包含很多不同类型的控件，包括文本字段、单选按钮、复选框、菜单列表、提交按钮等。HTML表单字段的一个完整列表以及如何使用它们的说明，可以在www.w3schools.com/html/html_forms.asp找到
＜input name="user"type="text"＞
如下的HTML创建了图9-1所示的表单。＜form＞标签和表单元素用粗体表示：
＜form action="process.php"method="post"name="signup"id="signup"＞
＜div＞
＜label for="username"class="label"＞Name＜/label＞
＜input name="username"type="text"id="username"size="36"＞
＜/div＞
＜div＞＜span class="label"＞Hobbies＜/span＞
＜input type="checkbox"name="hobby"id="heliskiing"value="heliskiing"＞
＜label for="heliskiing"＞Heli-skiing＜/label＞
＜input type="checkbox"name="hobby"id="pickle"value="pickle"＞
＜label for="pickle"＞Pickle eating＜/label＞
＜input type="checkbox"name="hobby"id="walnut"value="walnut"＞
＜label for="walnut"＞Making walnut butter＜/label＞
＜/div＞
＜div＞
＜label for="planet"class="label"＞Planet of Birth＜/label＞
＜select name="planet"id="planet"＞
＜option＞Earth＜/option＞
＜option＞Mars＜/option＞
＜option＞Alpha Centauri＜/option＞
＜option＞You've never heard of it＜/option＞
＜/select＞
＜/div＞
＜div class="labelBlock"＞Would you like to receive annoying e-mail from
us?＜/div＞
＜div class="indent"＞
＜input type="radio"name="spam"id="yes"value="yes"checked="checked"＞
＜label for="yes"＞Yes＜/label＞
＜input type="radio"name="spam"id="defnitely"value="defnitely"＞
＜label for="definitely"＞Definitely＜/label＞
＜input type="radio"name="spam"id="choice"value="choice"＞
＜label for="choice"＞Do I have a choice?＜/label＞
＜/div＞
＜div＞
＜input type="submit"name="submit"id="submit"value="Submit"＞
＜/div＞
＜/form＞
注意：这个示例中的＜label＞标签是表单常用的另一个标签。但是，它不会创建像按钮一样的一个表单控件。它允许我们在页面上添加一个可见的文本标签，它说明了表单控件的作用。
9.1.1 选择表单元素
我们已经在本书中多次见到，操作页面上的元素首先需要选择那些元素。例如，要确定存储在一个表单字段中的值，我们必须选择该字段。同样，如果想要隐藏或显示表单字段，必须使用JavaScript来标识这些元素。
正如我们已经介绍过的，jQuery可以使用几乎任何的CSS选择器来选择页面元素。选择单个元素的最容易的方法是给它赋一个ID，如下所示：
＜input name="user"type="text"id="user"＞
或者，可以使用jQuery的选择函数：
var userField=$（'#user'）；
一旦选择了一个字段，我们可以对它做一些事情。例如，假设想要确定一个字段中的值，检查访问者是否输入了一个字段。如果表单字段有一个ID为user，可以使用jQuery来访问该字段值，如下所示：
var fieldValue=$（'#user'）.val（）；
注意：jQuery val（）函数将在9.1.2节讨论。
但是，如果想要选择一种特定类型的所有表单元素，该怎么办呢？例如，可能想要给页面上的每个单选按钮添加一个click事件。
由于＜input＞标签用于单选按钮、文本字段、密码字段、复选框、提交按钮、重置按钮和隐藏字段，你不能只是选择＜input＞标签。相反，需要能够找到特定类型的一个＜input＞标签。
幸运的是，jQuery已经承担了选择特定类型的表单字段的负担（参见表9-1）。使用一个jQuery表单选择器，可以很容易地找到和使用一个特定类型的所有字段。例如，假设当访问者提交了一个表单，而我们想要检查该表单以确保所有文本字段都保存了一些值。你需要选择这些文本字段，然后挨个查看，看看每一个的字段是否包含一个值。可以像下面这样选择所有的文本字段：
$（'：text'）
然后，直接使用.each（）函数来遍历结果（参见4.10节），以确保每个字段中都有一个值（将会在9.4节学习页面上字段验证的更多知识）。
也可以把表单选择器和其他选择器组合使用。例如，假设在页面上有两个字段，并且我们想要只选择一个表单中的文本字段。假设带有需要的字段的表单有一个ID为signup，那么可以只选择该表单中的文本字段，如下所示：
$（'#signup：text'）
此外，jQuery提供了一些有用的过滤器，可以找到和一个特定状态匹配的表单字段：
·：checked选择选中标记或打开的所有字段，也就是说，复选框和单选按钮。例如，如果想要找到打开的所有复选框和单选按钮，可以使用如下代码：
$（'：checked'）
更好的是，可以使用这个过滤器来找到一组单选按钮中哪一个是选中的。例如，假设有一组单选按钮（“Pick a delivery method”），它们拥有不同的值（例如，UPS、USPS和FedEx），并且你想要找出访问者已经选择的单选按钮的值。一组相关的单选按钮都共享同样的HTML name属性，假设有一组单选按钮其name都为shipping。可以使用jQuery的属性选择器（参见4.6.2节的介绍）和：checked过滤器来找到选中的单选按钮的值：
var checkedValue=$（'input[name="shipping"]：checked'）.val（）；
选择器$（'input[name="shipping"]'）选择所有name为shipping的input元素，但是，添加了：checked后的$（'input[name="shipping"]：checked'），只选择选中的一项。val（）函数返回了该选择框中存储的值，例如，USPS。
·：selected选择一个列表或菜单中的所有选中的选项，它允许找到访问者从一个菜单或列表（＜select＞标签）做出的选择。例如，假设有一个ID为state的＜select＞标签，列出了美国的50个州。要找到访问者选择了哪个州，可以这样编写：
var selectedState=$（'#state.：selected'）.val（）；
注意，和：checked过滤器的例子不同，ID名和过滤器之间有一个空格（'#state：selected'）。这是因为这个过滤器选择＜option＞标签，而不是＜select＞标签。也就是说，这个jQuery选择意味着“找到ID为state的＜select＞标签中的所有选中的选项”。空格使得它像一个CSS子孙选择器一样工作：首先，它找到带有正确的ID的元素，然后在其中查找选中的任何元素。
注意：可以为一个＜select＞菜单激活多个选项。这意味着：selected过滤器可能会返回多个元素。
