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