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

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


使用 form [表单]对象

在前边的例子中，我们已经接触到很多余表单 form 对象的元素相关 javascript 代码，比如按钮、文本输入框等等。form 的元素是为了网页的交互性而设计的，你可以通过 form 获得用户提交的信息，在这章中我们将讨论 form 的元素。

【form 对象】

在我们使用单独的表单 form 对象之前，首先要引用 form 对象。正如我们在第二部分所讲的那样，form 对象由网页中的 <form></form> 标记对创建，相似的，form 里边的元素也是由 <INPUT> 等标记创建的，他们被存放在数组 elements 中。

在前边我们已经讲过了如何使用 elements 数组了。例如，在一个页面中有两个 form 对象：

<html>
<head>
<title></title>
</head>
<body>

<form name="customerinfo" action="/cgi-bin/customer.cgi" method="post">
Name: <input name="customername" type="text"><br>
Address: <input name="address" type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

<form name="orderdata" action="/cgi-bin/order.cgi" method="post">
Item Number: <input name="itemnumber" type="text"><br>
Quantity: <input name="quantity" type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

</body>
</html>


要使用名为 '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】

通常一个 <form> 标记中含有 ACTION="...." 的语句，这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 (包括路径，即整个URL)，在的一部分中，我们曾经使用过 onSubmit 事件来判断用户的输入是否正确，如果正确就将这些信息提交到服务器进行处理，而服务器上用来处理这些信息的程序所在的文件就是通过 ACTION="..." 来指定的。

如果你想要通过 form 的元素来获得用户的输入，而不在服务器上处理，那就不要在 <form> 标记中加入 ACTION="...." 和 METHOD="...."，就像我们在在线示例中使用的“查看源代码！”的按钮，这个按钮就是在客户端而不是服务器端运行了一些代码来查看源文件。

form 对象各元素类型

【button 按钮对象】

按钮有三种类型，一般的按钮 (button)，“提交” (submit) 按钮和 “重置” (reset) 按钮，它们有共同的属性和方法，也有各自不同的属性和方法。这三种按钮可以在 <INPUT> 标记中通过 TYPE="...." 来创建，例如：

<input type="submit" value="Submit">
<input type="reset" value="Clear">
<input type="button" value="Cancel" onClick="cancel();">

它们三个的不同之处在于，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 的属性，此属性用来判断每一个复选框的状态，即选中还是没选中，例如：<INPUT TYPE="checkbox" checked> 表示此复选框被选中；而 <INPUT TYPE="checkbox"> 表示此复选框没有被选中。

你可以通过 javascript 代码修改、设置 checkbox 的 checked 属性，就像这个 在线示例 中的那样，将 checkbox 的 checked=false 则不选中该复选框，checked=true 则相反。

单选框 radio 按钮与 checkbox 不同，它是在一序列选项中只能选一个，例如，我们对来访用户的年龄进行调查，看他们属于哪一个年龄段，则可以使用下边的代码：

<input name="agegroup" type="radio" value="under 21">21岁以下<br>
<input name="agegroup" type="radio" value="21 to 35">21岁到35岁<br>
<input name="agegroup" type="radio" value="36 to 45">36岁到45岁<br>
<input name="agegroup" type="radio" value="46 to 65">46岁到65岁<br>
<input name="agegroup" type="radio" value="over 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 name="state" size=1>
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="DC">District of Columbia
...
<option value="WY">Wyoming
</select>

一个 select 对象是由 <SELECT> 标记创建的。此对象的 options 属性是一个对应于 option 对象群的数组，每一个 <OPTION> 标记对应一个 option 对象，也就是对应一个 select 对象的选项。

注意：IE 3.0 不支持 select 和 option 对象。

select 对象的另外两个常用的属性是 length 和 selectedIndex 属性。length 属性是选项的个数，也就是 options 数组的元素个数；selectedIndex 属性则给出了被用户选中的那个选项在 options 数组中的下标。

下边的代码中，变量 i 是当前用户选中的那个选项在 options 中的下标，而第二行语句通过变量 options[1] 使得变量 s 指向被选中的选项对应的那个 option 对象：

var i = document.forms["myform"].state.selectedIndex;
var s = document.forms["myform"].state.options[1];

不过上边的代码只是对于 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 对应于 <OPTION> 标记中的 value="...." 属性，即 option 对象的值；参数 defaultSelected 和 selected 是布尔值，用来设置此新建的 option 对象是否为默认选项，以及是否被选中，这两个参数都是可选的，即可以不提供这两个参数的参数值。这个 option 对象可以被加入到一个 options 数组中。而删除一个已经存在的 option 对象，只需将此对象在数组中的那个元素设置为空 ('null' 值) 即可，同时，这样也使数组变小了。

这个 在线示例 演示了如何创建一个两层的菜单系统，而且此菜单系统的第二层菜单是根据第一层菜单动态生成的。注意，这个例子不能在 IE 浏览器中使用。

此例中一些值得注意的地方：

第一，为每一个二级菜单设置一个数组；
不管选择了哪个大类，都会触发 onChange 事件，然后调用 setOptions() 函数设置二级菜单；
函数 setOptions() 首先将原有的二级菜单全部选项删除，然后再将新的二级菜单加入到选项列表中；
一旦二级菜单被设置完成，我们就调用 history.go(0) 来刷新当前页面，促使新的选项能够显示出来。