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) 來刷新當前頁面，促使新的選項能夠顯示出來。
使用 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) 來刷新當前頁面，促使新的選項能夠顯示出來。
