第13章 零基础学JavaScript表单对象.ppt

第13章 表单对象 Document对象的forms属性可以返回一个数组，数组中的元素都是Form对象。Form对象又称为表单对象，该对象可以让用户实现输入文字、选择选项和提交数据等功能。 13.1 表单对象 Form对象代表了HTML文档中的表单，由于HTML中的表单会由很多表单元素组成，因此Form对象也会包含很多子对象。 13.1.1 表单对象介绍 在HTML文档中有可能会出现多个表单，也就是说，一个HTML文档中有可能出现多个form标签。JavaScript会为每个form标签创建一个Form对象，并将这些Form对象存放在forms[]数组中。因此，可以使用以下代码来获得文档中的Form对象。 document.forms[i] 13.1.2 表单对象的属性 Form对象的属性大多与form元素的属性相关。（具体内容请参照书。） 13.1.3 表单对象的方法 Form对象的方法并不多，只有reset()和submit()两个方法，这两个方法类似于单击了重置按钮和提交按钮。（具体内容请参照书。） 13.1.4 表单对象的事件 Form对象的事件与Form对象的方法相似，也是和表单的提交与重置相关的。（具体内容请参照书。） 13.2 表单对象的应用 利用Form对象的属性、方法和事件可以现实很多动态效果。本节里介绍几个Form对象的应用方法，希望可以起到抛砖引玉的作用。 13.2.1 表单验证 在Form对象中使用得比较多的就是表单验证。在填写表单时，常常有些必选项是需要填写的，因此，在提交表单时，可以先验证是不是所有的必选项都已经填写完毕，如果是的话则提交表单，否则取消提交表单，让用户继续填写。（具体内容请参照书。） 13.2.2 循环验证表单 在上面的例子中，通过元素名称判断每一个文本框是否输入了文字，这种方法使用起来比较方便，源代码看上去也比较直观。然而，Form对象的elements属性可以返回所有表单中的元素，因此可以使用一个循环来判断elements[]数组中对象的value属性值的长度是否为0来验证表单。（具体内容请参照书。） 13.2.3 设置表单的提交方式 在表单填写完毕之后，可以将表单提交到一个接收表单内容的地方。通常的做法是，将表单提交到一个动态网页，动态网页接收到表单的内容之后，将其写入数据库或以文本形式记录在服务器，以便日后使用。而另一种做法是，将表单内容作为Email的内容发送到一个指定的邮箱中。下面的例子可以让用户自己选择将表单以哪种方法提交。（具体内容请参照书。） 13.2.4 重置表单的提示 在默认情况下，如果用户单击了重置表单按钮，浏览器窗口就会马上将表单中的所有元素的值设置为初始状态。如果用户一不小心单击了该按钮，则会清除所有已经填写完毕的数据。为了防止这种意外情况的出现，可以在单击重置按钮时，弹出一个确认框，让用户确认是否重置表单。（具体内容请参照书。） 13.2.5 不使用提交按钮提交表单 通常在表单中，都是使用单击提交按钮的方法来提交表单。然而，在Form对象中有一个submit()方法，使用该方法可以在不使用提交按钮的情况下提交表单。（具体内容请参照书。） 13.3 表单元素 Form表单中可以存在很多表单元素，通常在浏览器窗口中，看不到Form元素，但是可以看到这些表单元素。 13.3.1 表单元素 在HTML中定义的表单元素有很多，这些表单元素可以让用户输入文字，如文本框、密码框等；或者让用户选择可选项，如下拉列表框、复选框等；也可以让用户提交信息或重置表单，如提交按钮、重置按钮等；甚至还可以为程序员提供开发上的便利，如隐藏框等。在HTML 4.01中所规定的表单元素如表13-4所示。（具体内容请参照书。） 13.3.2 表单元素的命名 在上一节中可以看出，form标签与/form标签之间可以存在很多表单元素。Form对象中可以使用elements[]数组来获得代表这些表单元素的子对象。elements[]数组中存放的是各种类型的Form对象的子对象，elements[]数组中的元素是由form标签与/form标签之间表单元素所组成，因此可以使用以下代码来获得代表HTML文档中的第1个Form对象中的第2个元素的对象。（具体内容请参照书。） 13.4 文本框 在HTML中，文本框包括单行文本框和多行文本框两种。密码框可以看成是一种特殊的单行文本框，在密码框中输入的文字将会以掩码形式出现。 13.4.1 文本框的创建方式 在HTML代码中，创建单行文本框与创建密码框所使用的元素都是input元素，其语法代码如下所示： input type=boxType name=boxName value=boxValue size=boxSize m