|
使用 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> 要使用名為 'quantity' 的元素，可以使用下邊三種方法中的任何一種： var e = document.forms["orderdata"].elements[1]; 你可以通過(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"> 你也可以通過(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> 一個(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++) { 【select 和 option 對(duì)象】 使用 select 選項(xiàng)列表 (即是通常的下拉列表框之類的) 也是一種給用戶提供選項(xiàng)的有用方法,，看一下下邊的代碼： <select name="state" size=1> 注意：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; 為了處理多選的情況,，你可以使用 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 瀏覽器中使用,。 此例中一些值得注意的地方：
|
|
|
來(lái)自： nxhujiee > 《JavaScript》
