使用 form [表單]對(duì)象
在前邊的例子中，我們已經(jīng)接觸到很多余表單 form 對(duì)象的元素相關(guān) JavaScript 代碼，比如按鈕、文本輸入框等等。form 的元素是為了網(wǎng)頁(yè)的交互性而設(shè)計(jì)的，你可以通過(guò) form 獲得用戶提交的信息，在這章中我們將討論 form 的元素。
【form 對(duì)象】
在我們使用單獨(dú)的表單 form 對(duì)象之前，首先要引用 form 對(duì)象。正如我們?cè)诘诙糠炙v的那樣，form 對(duì)象由網(wǎng)頁(yè)中的 <FORM></FORM> 標(biāo)記對(duì)創(chuàng)建，相似的，form 里邊的元素也是由 <INPUT> 等標(biāo)記創(chuàng)建的，他們被存放在數(shù)組 elements 中。
在前邊我們已經(jīng)講過(guò)了如何使用 elements 數(shù)組了。例如，在一個(gè)頁(yè)面中有兩個(gè) form 對(duì)象：
<html> <form name="customerinfo" action="/cgi-bin/customer.cgi" method="post"> <form name="orderdata" action="/cgi-bin/order.cgi" method="post"> </body>
<head>
<title></title>
</head>
<body>
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>
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>
</html>
要使用名為 'quantity' 的元素，可以使用下邊三種方法中的任何一種：
var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;每一種元素類型 (type) 多對(duì)應(yīng)每一種不同的對(duì)象，這些對(duì)象有一些共同的屬性和方法，如：value 屬性和 focus() 方法，此外，它們還有自己獨(dú)特的屬性和方法，下邊我們將會(huì)按順序?qū)γ恳环N元素類型進(jìn)行講解。
你可以通過(guò)元素的 type 屬性知道元素是什么類型，在上邊的例子中，我們可以使用下邊的代碼來(lái)獲得名為 'quantity' 的元素的類型：
document.orderdata.quantity.type
結(jié)果將會(huì)返回 'text'。
【處理一個(gè)表單 form】
通常一個(gè) <FORM> 標(biāo)記中含有 ACTION="...." 的語(yǔ)句，這個(gè)語(yǔ)句是用來(lái)指定一個(gè)表單提交后的服務(wù)器端處理文件的文件名 (包括路徑，即整個(gè)URL)，在的一部分中，我們?cè)?jīng)使用過(guò) onSubmit 事件來(lái)判斷用戶的輸入是否正確，如果正確就將這些信息提交到服務(wù)器進(jìn)行處理，而服務(wù)器上用來(lái)處理這些信息的程序所在的文件就是通過(guò) ACTION="..." 來(lái)指定的。
如果你想要通過(guò) form 的元素來(lái)獲得用戶的輸入，而不在服務(wù)器上處理，那就不要在 <FORM> 標(biāo)記中加入 ACTION="...." 和 METHOD="...."，就像我們?cè)谠诰€示例中使用的“查看源代碼！”的按鈕，這個(gè)按鈕就是在客戶端而不是服務(wù)器端運(yùn)行了一些代碼來(lái)查看源文件。
【button 按鈕對(duì)象】
按鈕有三種類型，一般的按鈕 (button)，“提交” (submit) 按鈕和 “重置” (reset) 按鈕，它們有共同的屬性和方法，也有各自不同的屬性和方法。這三種按鈕可以在 <INPUT> 標(biāo)記中通過(guò) TYPE="...." 來(lái)創(chuàng)建，例如：
<input type="submit" value="Submit">
<input type="reset" value="Clear">
<input type="button" value="Cancel" onClick="cancel();">它們?nèi)齻€(gè)的不同之處在于，submit 提交按鈕有個(gè)默認(rèn)動(dòng)作是點(diǎn)擊此類按鈕以后自動(dòng)提交表單的內(nèi)容；reset 重置按鈕的默認(rèn)動(dòng)作是點(diǎn)擊此類按鈕以后自動(dòng)將表單的內(nèi)容恢復(fù)到最初的狀態(tài)；而對(duì)于一般的 button 按鈕來(lái)說(shuō)，則沒(méi)有默認(rèn)動(dòng)作，需要通過(guò)使用 onClick 事件句柄，在此事件觸發(fā)時(shí)調(diào)用函數(shù)才行。
你也可以通過(guò)使用 onClick 事件句柄來(lái)改變 submit 和 reset 按鈕的默認(rèn)動(dòng)作。這個(gè) 在線示例 中就使用了這三種不同的按鈕來(lái)完成計(jì)算功能。
技巧1：在此例中我們使用了 JavaScript 的內(nèi)建函數(shù) parseInt()，此函數(shù)將文本框里的字符串對(duì)象轉(zhuǎn)換成數(shù)值對(duì)象。否則字符 "2" 和字符 "2" 進(jìn)行 "+" 運(yùn)算的結(jié)果是 "22"，而不是 4。
技巧2：reset 按鈕有默認(rèn)動(dòng)作，那就是將表單中所有的內(nèi)容恢復(fù)到最初的狀態(tài)，如果想改變其默認(rèn)動(dòng)作，可以像這個(gè) 在線示例 那樣。
【text (文本框)、password (密碼輸入框)、hidden (隱藏域) 和 textarea (多行文本框) 對(duì)象】
這幾個(gè)對(duì)象都很相似，輸入的都是字符串，它們僅僅是顯示的方式不一樣而已：
技巧：hidden 域是一個(gè)很有用的對(duì)象，它可以將一些不想在頁(yè)面上顯示的信息傳給服務(wù)器，但是，雖然這些信息不會(huì)顯示在頁(yè)面上，你還是不能將重要的信息，如密碼等信息放到此域中，因?yàn)橛脩粼诳蛻舳耸强梢酝ㄟ^(guò)查看源文件知道這些信息的。
text 和 textarea 元素提供了 onChange 事件，當(dāng)這些輸入框的內(nèi)容發(fā)生變化時(shí)就會(huì)觸發(fā)此事件?？纯催@個(gè) 在線示例 就知道了。你會(huì)注意到 onChange 事件只是發(fā)生在用戶離開(kāi)輸入框 (使用了 TAB 鍵或鼠標(biāo)焦點(diǎn)離開(kāi)) 或者按了 “回車” 鍵的時(shí)候發(fā)生。
你只有確實(shí)地改變了文本框中的內(nèi)容才會(huì)觸發(fā)此事件。如果你將輸入的內(nèi)容清楚，然后輸入完全相同的內(nèi)容，將不會(huì)觸發(fā) onChange 事件。
【checkbox (復(fù)選框) 和 radio (單選框) 按鈕對(duì)象】
checkbox 和 radio 按鈕可以為用戶提供一序列選項(xiàng)，checkbox 用于可以多選的選項(xiàng)中，而 radio 用于只能單選的選項(xiàng)中。
checkbox 對(duì)象通過(guò) VALUE="...." 來(lái)設(shè)置值，但表單提交之后，服務(wù)器接收到的只是選中的項(xiàng)的值，此對(duì)象有一個(gè) checked 的屬性，此屬性用來(lái)判斷每一個(gè)復(fù)選框的狀態(tài)，即選中還是沒(méi)選中，例如：<INPUT TYPE="checkbox" checked> 表示此復(fù)選框被選中；而 <INPUT TYPE="checkbox"> 表示此復(fù)選框沒(méi)有被選中。
你可以通過(guò) JavaScript 代碼修改、設(shè)置 checkbox 的 checked 屬性，就像這個(gè) 在線示例 中的那樣，將 checkbox 的 checked=false 則不選中該復(fù)選框，checked=true 則相反。
單選框 radio 按鈕與 checkbox 不同，它是在一序列選項(xiàng)中只能選一個(gè)，例如，我們對(duì)來(lái)訪用戶的年齡進(jìn)行調(diào)查，看他們屬于哪一個(gè)年齡段，則可以使用下邊的代碼：
<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歲以上我們注意到這些選項(xiàng)對(duì)應(yīng)的 radio 按鈕對(duì)象有一個(gè)相同的對(duì)象名 'agegroup'，這是說(shuō)明這些按鈕都是在一個(gè)組里的，在這個(gè)組里，任何時(shí)候都只能有其中的一項(xiàng) (不可能有兩個(gè)或兩個(gè)以上) 被選中，當(dāng)表單被提交到服務(wù)器的時(shí)候，服務(wù)器接收到的值就是選中的那一項(xiàng)。同時(shí)，agegroup 對(duì)象的值也是選中的那一項(xiàng)的 value 屬性的值。
一個(gè)組中的每一個(gè) radio 按鈕都代表一個(gè) radio 對(duì)象，和 checkbox 類似，每一個(gè)都有 checked 和 value 屬性，此屬性對(duì)應(yīng)于 HTML 標(biāo)記中的 VALUE="...." 代碼，和 checkbox 所不同的是當(dāng)組里的一個(gè) radio 按鈕被選中時(shí)，則其它 radio 按鈕將不會(huì)被選中。
現(xiàn)在問(wèn)題來(lái)了：在一組 radio 按鈕中，如何去訪問(wèn)其中的任何一個(gè) radio 按鈕？使用 radio 按鈕組的名字 (如上邊的 agegroup) 是不行的，它的值只是選中的按鈕的值，那你要訪問(wèn)其它沒(méi)有被選中的值該怎么辦呢？看看下邊的代碼就知道了：
var rb; for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}
【select 和 option 對(duì)象】
使用 select 選項(xiàng)列表 (即是通常的下拉列表框之類的) 也是一種給用戶提供選項(xiàng)的有用方法，看一下下邊的代碼：
<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>一個(gè) select 對(duì)象是由 <SELECT> 標(biāo)記創(chuàng)建的。此對(duì)象的 options 屬性是一個(gè)對(duì)應(yīng)于 option 對(duì)象群的數(shù)組，每一個(gè) <OPTION> 標(biāo)記對(duì)應(yīng)一個(gè) option 對(duì)象，也就是對(duì)應(yīng)一個(gè) select 對(duì)象的選項(xiàng)。
注意：IE 3.0 不支持 select 和 option 對(duì)象。
select 對(duì)象的另外兩個(gè)常用的屬性是 length 和 selectedIndex 屬性。length 屬性是選項(xiàng)的個(gè)數(shù)，也就是 options 數(shù)組的元素個(gè)數(shù)；selectedIndex 屬性則給出了被用戶選中的那個(gè)選項(xiàng)在 options 數(shù)組中的下標(biāo)。
下邊的代碼中，變量 i 是當(dāng)前用戶選中的那個(gè)選項(xiàng)在 options 中的下標(biāo)，而第二行語(yǔ)句通過(guò)變量 options[1] 使得變量 s 指向被選中的選項(xiàng)對(duì)應(yīng)的那個(gè) option 對(duì)象：
var i = document.forms["myForm"].state.selectedIndex;
var s = document.forms["myForm"].state.options[1];不過(guò)上邊的代碼只是對(duì)于 select 對(duì)象為單選的情況下有用，當(dāng)你在 <SELECT> 標(biāo)記中加入 MULTIPLE 屬性后，用戶就可以選擇多個(gè)選項(xiàng)了，在這種情況下，selectedIndex 屬性只是指向第一個(gè)被選中的項(xiàng)。
為了處理多選的情況，你可以使用 option 對(duì)象的 selected 屬性通過(guò)循環(huán)檢測(cè)每一個(gè) option 對(duì)象，就像這個(gè) 在線示例 演示的那樣，查看一下源代碼就知道它是如何實(shí)現(xiàn)的了。
【創(chuàng)建和刪除 option 對(duì)象】
注意：IE 4.0 對(duì)選擇列表 selection 和 option 的方法不同于 Netscape，這一部分內(nèi)容只能運(yùn)用在 Netscape 3.0 或者更高版本。
你還可以通過(guò)代碼創(chuàng)建和刪除選項(xiàng) option 對(duì)象。創(chuàng)建 option 對(duì)象使用 Option 數(shù)據(jù)結(jié)構(gòu)，例如：
var opt = new Option(text, value, defaultSelected, selected)
參數(shù) text 是顯示在頁(yè)面上的選項(xiàng)的文字，參數(shù) value 對(duì)應(yīng)于 <OPTION> 標(biāo)記中的 VALUE="...." 屬性，即 option 對(duì)象的值；參數(shù) defaultSelected 和 selected 是布爾值，用來(lái)設(shè)置此新建的 option 對(duì)象是否為默認(rèn)選項(xiàng)，以及是否被選中，這兩個(gè)參數(shù)都是可選的，即可以不提供這兩個(gè)參數(shù)的參數(shù)值。這個(gè) option 對(duì)象可以被加入到一個(gè) options 數(shù)組中。而刪除一個(gè)已經(jīng)存在的 option 對(duì)象，只需將此對(duì)象在數(shù)組中的那個(gè)元素設(shè)置為空 ('null' 值) 即可，同時(shí)，這樣也使數(shù)組變小了。
這個(gè) 在線示例 演示了如何創(chuàng)建一個(gè)兩層的菜單系統(tǒng)，而且此菜單系統(tǒng)的第二層菜單是根據(jù)第一層菜單動(dòng)態(tài)生成的。注意，這個(gè)例子不能在 IE 瀏覽器中使用。
此例中一些值得注意的地方：
聯(lián)系客服
