来源:
[正文] 在前边的例子中,我们已经接触到很多余表单 form 对象的元素相关 JavaScript 代码,比如按钮、文本输入框等等。form 的元素是为了网页的交互性而设计的,你可以通过 form 获得用户提交的信息,在这章中我们将讨论 form 的元素。 【form 对象】 在我们使用单独的表单 form 对象之前,首先要引用 form 对象。正如我们在第二部分所讲的那样,form 对象由网页中的 <FORM></FORM> 标记对创建,相似的,form 里边的元素也是由 <INPUT> 等标记创建的,他们被存放在数组 elements 中。 在前边我们已经讲过了如何使用 elements 数组了。例如,在一个页面中有两个 form 对象: <html> <form name="customerinfo" action="/cgi-bin/customer.cgi" method="post"> <form name="orderdata" action="/cgi-bin/order.cgi" method="post"> </body> 要使用名为 ‘quantity‘ 的元素,可以使用下边三种方法中的任何一种: var e = document.forms["orderdata"].elements[1]; 你可以通过元素的 type 属性知道元素是什么类型,在上边的例子中,我们可以使用下边的代码来获得名为 ‘quantity‘ 的元素的类型: document.orderdata.quantity.type 结果将会返回 ‘text‘。 【处理一个表单 form】 通常一个 <FORM> 标记中含有 ACTION="...." 的语句,这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 (包括路径,即整个URL),在的一部分中,我们曾经使用过 onSubmit 事件来判断用户的输入是否正确,如果正确就将这些信息提交到服务器进行处理,而服务器上用来处理这些信息的程序所在的文件就是通过 ACTION="..." 来指定的。 如果你想要通过 form 的元素来获得用户的输入,而不在服务器上处理,那就不要在 <FORM> 标记中加入 ACTION="...." 和 METHOD="....",就像我们在在线示例中使用的“查看源代码!”的按钮,这个按钮就是在客户端而不是服务器端运行了一些代码来查看源文件。 【button 按钮对象】 按钮有三种类型,一般的按钮 (button),“提交” (submit) 按钮和 “重置” (reset) 按钮,它们有共同的属性和方法,也有各自不同的属性和方法。这三种按钮可以在 <INPUT> 标记中通过 TYPE="...." 来创建,例如: <input type="submit" value="Submit"> 你也可以通过使用 onClick 事件句柄来改变 submit 和 reset 按钮的默认动作。这个 在线示例 中就使用了这三种不同的按钮来完成计算功能。 技巧1:在此例中我们使用了 JavaScript 的内建函数 parseInt(),此函数将文本框里的字符串对象转换成数值对象。否则字符 "2" 和字符 "2" 进行 "+" 运算的结果是 "22",而不是 4。 技巧2:reset 按钮有默认动作,那就是将表单中所有的内容恢复到最初的状态,如果想改变其默认动作,可以像这个 在线示例 那样。 【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> 一个组中的每一个 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++) { 【select 和 option 对象】 使用 select 选项列表 (即是通常的下拉列表框之类的) 也是一种给用户提供选项的有用方法,看一下下边的代码: <select name="state" size=1> 注意: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; 为了处理多选的情况,你可以使用 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 浏览器中使用。 此例中一些值得注意的地方:
|
|