JavaScript教程 - 第四部分关于form对象

来源：百度文库编辑：神马文学网时间：2024/04/28 04:06:44

对象
在前边的例子中，我们已经接触到很多余表单 form 对象的元素相关 JavaScript 代码，比如按钮、文本输入框等等。form 的元素是为了网页的交互性而设计的，你可以通过 form 获得用户提交的信息，在这章中我们将讨论 form 的元素。
【form 对象】
在我们使用单独的表单 form 对象之前，首先要引用 form 对象。正如我们在第二部分所讲的那样，form 对象由网页中的标记对创建，相似的，form 里边的元素也是由等标记创建的，他们被存放在数组 elements 中。
在前边我们已经讲过了如何使用 elements 数组了。例如，在一个页面中有两个 form 对象：

要使用名为 'quantity' 的元素，可以使用下边三种方法中的任何一种：
var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;
每一种元素类型 (type) 多对应每一种不同的对象，这些对象有一些共同的属性和方法，如：value 属性和 focus() 方法，此外，它们还有自己独特的属性和方法，下边我们将会按顺序对每一种元素类型进行讲解。
你可以通过元素的 type 属性知道元素是什么类型，在上边的例子中，我们可以使用下边的代码来获得名为 'quantity' 的元素的类型：
document.orderdata.quantity.type
结果将会返回 'text'。
【处理一个表单 form】
通常一个

标记中含有 ACTION="...." 的语句，这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 (包括路径，即整个URL)，在的一部分中，我们曾经使用过 onSubmit 事件来判断用户的输入是否正确，如果正确就将这些信息提交到服务器进行处理，而服务器上用来处理这些信息的程序所在的文件就是通过 ACTION="..." 来指定的。
如果你想要通过 form 的元素来获得用户的输入，而不在服务器上处理，那就不要在标记中加入 ACTION="...." 和 METHOD="...."，就像我们在在线示例中使用的“查看源代码！”的按钮，这个按钮就是在客户端而不是服务器端运行了一些代码来查看源文件。
【button 按钮对象】
按钮有三种类型，一般的按钮 (button)，“提交” (submit) 按钮和 “重置” (reset) 按钮，它们有共同的属性和方法，也有各自不同的属性和方法。这三种按钮可以在标记中通过 TYPE="...." 来创建，例如：

它们三个的不同之处在于，submit 提交按钮有个默认动作是点击此类按钮以后自动提交表单的内容；reset 重置按钮的默认动作是点击此类按钮以后自动将表单的内容恢复到最初的状态；而对于一般的 button 按钮来说，则没有默认动作，需要通过使用 onClick 事件句柄，在此事件触发时调用函数才行。
你也可以通过使用 onClick 事件句柄来改变 submit 和 reset 按钮的默认动作。这个在线示例中就使用了这三种不同的按钮来完成计算功能。
技巧1：在此例中我们使用了 JavaScript 的内建函数 parseInt()，此函数将文本框里的字符串对象转换成数值对象。否则字符 "2" 和字符 "2" 进行 "+" 运算的结果是 "22"，而不是 4。
技巧2：reset 按钮有默认动作，那就是将表单中所有的内容恢复到最初的状态，如果想改变其默认动作，可以像这个在线示例那样。
【text (文本框)、password (密码输入框)、hidden (隐藏域) 和 textarea (多行文本框) 对象】
这几个对象都很相似，输入的都是字符串，它们仅仅是显示的方式不一样而已： text - 一个单行的文本输入框 password - 一个单行的密码输入框，输入的字符将不会显示出来，显示出来的只是 '*' 号 hidden - 一个单行的文本域，但是它不会在页面上显示任何东西，而且使用网页的用户不能直接修改它的值，但是你却可以通过代码修改它的值 textarea - 多行的文本输入框，可以在框中使用 “回车” 换行
技巧：hidden 域是一个很有用的对象，它可以将一些不想在页面上显示的信息传给服务器，但是，虽然这些信息不会显示在页面上，你还是不能将重要的信息，如密码等信息放到此域中，因为用户在客户端是可以通过查看源文件知道这些信息的。
text 和 textarea 元素提供了 onChange 事件，当这些输入框的内容发生变化时就会触发此事件。看看这个在线示例就知道了。你会注意到 onChange 事件只是发生在用户离开输入框 (使用了 TAB 键或鼠标焦点离开) 或者按了 “回车” 键的时候发生。
你只有确实地改变了文本框中的内容才会触发此事件。如果你将输入的内容清楚，然后输入完全相同的内容，将不会触发 onChange 事件。
【checkbox (复选框) 和 radio (单选框) 按钮对象】
checkbox 和 radio 按钮可以为用户提供一序列选项，checkbox 用于可以多选的选项中，而 radio 用于只能单选的选项中。
checkbox 对象通过 VALUE="...." 来设置值，但表单提交之后，服务器接收到的只是选中的项的值，此对象有一个 checked 的属性，此属性用来判断每一个复选框的状态，即选中还是没选中，例如：表示此复选框被选中；而表示此复选框没有被选中。
你可以通过 JavaScript 代码修改、设置 checkbox 的 checked 属性，就像这个在线示例中的那样，将 checkbox 的 checked=false 则不选中该复选框，checked=true 则相反。
单选框 radio 按钮与 checkbox 不同，它是在一序列选项中只能选一个，例如，我们对来访用户的年龄进行调查，看他们属于哪一个年龄段，则可以使用下边的代码：
21岁以下

21岁到35岁

36岁到45岁

46岁到65岁

65岁以上
我们注意到这些选项对应的 radio 按钮对象有一个相同的对象名 'agegroup'，这是说明这些按钮都是在一个组里的，在这个组里，任何时候都只能有其中的一项 (不可能有两个或两个以上) 被选中，当表单被提交到服务器的时候，服务器接收到的值就是选中的那一项。同时，agegroup 对象的值也是选中的那一项的 value 属性的值。
一个组中的每一个 radio 按钮都代表一个 radio 对象，和 checkbox 类似，每一个都有 checked 和 value 属性，此属性对应于 HTML 标记中的 VALUE="...." 代码，和 checkbox 所不同的是当组里的一个 radio 按钮被选中时，则其它 radio 按钮将不会被选中。
现在问题来了：在一组 radio 按钮中，如何去访问其中的任何一个 radio 按钮？使用 radio 按钮组的名字 (如上边的 agegroup) 是不行的，它的值只是选中的按钮的值，那你要访问其它没有被选中的值该怎么办呢？看看下边的代码就知道了：
var rb;
for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}
R原来使用组的名字 (如 agegroup) 作为数组，然后给数组加上下标即可 (如 agegroup[0] 是访问 agegroup 组中的第一个 radio 按钮)。另外要记住的是在这个数组中，只有一个元素的 checked 属性值是 true，因为任何时候都只有一个 radio 按钮被选中。请看在线示例。
【select 和 option 对象】
使用 select 选项列表 (即是通常的下拉列表框之类的) 也是一种给用户提供选项的有用方法，看一下下边的代码：

一个 select 对象是由标记中加入 MULTIPLE 属性后，用户就可以选择多个选项了，在这种情况下，selectedIndex 属性只是指向第一个被选中的项。
为了处理多选的情况，你可以使用 option 对象的 selected 属性通过循环检测每一个 option 对象，就像这个在线示例演示的那样，查看一下源代码就知道它是如何实现的了。
【创建和删除 option 对象】
注意：IE 4.0 对选择列表 selection 和 option 的方法不同于 Netscape，这一部分内容只能运用在 Netscape 3.0 或者更高版本。
你还可以通过代码创建和删除选项 option 对象。创建 option 对象使用 Option 数据结构，例如：
var opt = new Option(text, value, defaultSelected, selected)
参数 text 是显示在页面上的选项的文字，参数 value 对应于

JavaScript教程 - 第四部分关于form对象 JavaScript教程 - 第四部分关于form对象 JavaScript教程 - 第四部分关于form对象 JavaScript教程 - 第四部分关于form对象 JavaScript教程 - 第四部分关于form对象 JavaScript教程 - 第三部分 window 和 frame 对象 JavaScript教程 - 第三部分 window 和 frame 对象夜猫 - JavaScript教程 - 第三部分 window 和 frame 对象 - Powered by ymCMS v3.1.0 Alpha2 JavaScript教程 - 第一部分接触 JavaScript JavaScript教程 - 第五部分高级话题 JavaScript教程 - 第五部分高级话题 JavaScript教程 - 第五部分高级话题【知识】修改form的enctype - javascript JavaScript的框架对象 JavaScript RegExp 对象参考手册 javascript教程 JavaScript教程 JavaScript的Base对象与Body对象 JavaScript的document对象详解 javascript 中 document对象详解 JavaScript的Anchor超链接对象 JavaScript Date 对象与函数 JavaScript的document对象详解第四部分

JavaScript教程 - 第四部分 关于form对象

JavaScript教程 - 第四部分关于form对象