基于任务驱动模式的JavaScript程序设计案例第7章 表单操作.ppt

第7章 表单操作  7.1 概 述　　大多数网页和用户之间的交互都发生在表单中，每个浏览器的表单中都有许多交互式的HTML元素：文本域、按钮、复选框和选项列表等。本章重点介绍如何操作表单以及表单元素。 　　 7.2 表 单 操 作7.2.1 form对象　　使用最初的DOM语法，可通过文档包含的表单数组索引或名字(如果在form标记的name属性中分配了一个标识符)来引用form对象。如果在文档中只有一个表单，那么它也是一个数组(一个元素的数组)的成员，其引用语法如下： 7.2.2 访问表单属性　　表单完全由网页中的标准HTML标记语言创建，用户可设置name，target，action，method和enctype属性。这些都是form对象的属性，访问它们的语法格式如下： 7.2.3 form.elements[]属性　　除了跟踪表单中每一类的元素外，浏览器还保留一个表单中所有控件元素的列表。这个列表是一个数组，其列表项根据HTML标记语言在源代码中的顺序而定。使用元素名字对于直接创建这些元素的引用非常有效，但对于需要浏览所有表单元素的脚本不太有效，因此文本框的数目需要根据具体页面需求而改变。　　下面的代码在for循环中使用form.elements[]属性查看表单中的所有元素，并将文本框的内容清空。由于有些元素是按钮，没有可以设置为空字符串的value属性，因此脚本不能简单的进入表单内部，将每个元素设置为空字符串。 　　在第一个语句中，创建一个变量form，它含有对文档第一个表单的引用，这么做是为了以后在脚本中多次引用表单元素时能够节省代码，接着对表单中的elements数组元素进行循环有哪些信誉好的足球投注网站。每个表单元素有一个type属性，它表示表单元素的类型，文本、按钮、单选按钮和复选框等。当表单元素的type属性为text时，需要将其value属性设置为空字符串。　　表单元素的类型如表7-1所示。 7.2.4 表单方法　　表单常用的方法有两个，一个是reset()方法，用于对表单元素进行重置操作，其作用等同于点击了表单内的重置按钮；另一个是submit()方法，该方法较为常用，通常用于以代码的形式执行提交表单的操作。　　页面中有表单，但是没有提交按钮，表单是否能提交呢？当然可以，我们可以通过在JavaScript中调用表单的submt()方法来实现此效果，示例代码如下所示。  　7.3 表单元素操作7.3.1 通用属性　　很多表单元素之间有着相同的属性，这些属性的作用和用法都是相同的，下面介绍表单元素中常用的通用属性。　　(1) disabled属性是指禁用某个控件，使其不可用，用户不能用鼠标对其进行操作，该控件也不能获得焦点，而且被禁用控件的外表会被灰化，使其与其他正常的控件区别开来，更重要的是，如果该控件被禁用，则当表单提交时，后台处理程序不能获得该禁用控件的对应值。 　　(2)? readOnly属性主要是针对文本框和文本域，该属性和disabled属性一样，对应的都是布尔值类型，true或false，如果文本框被设置为readOnly即只读，那么该文本框将不能获得焦点，且该文本框不能输入内容也不能修改文本框中的内容。这是该属性和disabled属性的共同特点，不同的是，readOnly属性如果设置为true时，控件的外观不会发生改变，而且在表单提交的时候，后台应用程序依然可以接收到控件对应的值。 7.3.2 文本框　　文本框在页面中用于接收用户的输入，是一个使用频率很高的表单控件，接收各种形式的字符串，下面介绍文本框的常用操作。　　通过value属性获得或设置文本框的内容，其语法如下： 　　还可以通过onfocus属性给文本框绑定focus事件，在获得焦点的时候能够触发此事件，以及相对应的blur事件，该事件会在失去焦点的时候触发；与此同时，文本框还有常用事件，如change事件在文本内容改变的时候触发，以及keyUp、keyDown、keyPress等常用的键盘按键事件。 7.3.3 复选框　　在图形用户界面中，复选框可以在选中与未选中之间切换。两个或更多的复选框在物理上可以组合在一起，但它们之间没有相互作用，每一个都是独立设置的。　　复选框的input标记默认为未选中，在定义中添加常量checked属性可以预先设置选中复选框，这样，在网页显示时该复选框被选中。复选框标签文本定义在input标记外，标签不是复选框的一部分。下面介绍复选框的常用属性：checked属性。 　　在表格的表头中，有一个复选框用于实现全选和取消全选的操作，该复选框和其他复选框的名字不同，在表头复选框中绑定点击事件，在事件处理程序中将其自身作为参数传入事件处理程序，通