表單對象JavaScript基礎(chǔ)初學(xué)者用

1、13. 1. 1表單對象介紹在HTML文檔中有可能會出現(xiàn)多個表單,也就是說, 一個HTMI.文檔中有可能出現(xiàn)多個for 標(biāo)簽。 JavaScript為每個form標(biāo)簽創(chuàng)建一個Fot對 象.并將這些For對象存放在fonsQ數(shù)組中。因 此，可以使用以下代碼來獲得文檔屮的FomX.jo docuiient forms f iJavaScript13. 1.2表單對象的屬性 FomXj象的屈性人形與for尤索的屬件相關(guān)。 （具體內(nèi)容請參ratio ）13.2表單對線的應(yīng)用 Fot對象的方法并不多.只有reset ()和siib.it () 兩個方法,這兩個方法類似丁單擊了重置按鈕和 提交按鈕。(人體

2、內(nèi)容請參照|5o )JavaScript13. 1.4表單對象的事件 For對象的下件與Fot対象的方法相似,也是和 表單的提交與亞置相關(guān)的。(其體內(nèi)容請參照 書。)利用Fot對象的屬性、方法和事件可以現(xiàn)實很多 動態(tài)效果。本節(jié)里介紹兒個F"!対象的應(yīng)用方法, 希望可以起到拋磚引E的作用。JavaScript13. 2. 1表單驗證在Forn対象屮使用得比較多的就足衣單驗證。在 填寫表單時,常常有些必選項是需耍填寫的，I大I 此.任提交表單時，町以先驗證足不是所仃的必 選項都已經(jīng)填寫完畢，如果是的話則提交表單, 否則取消提交農(nóng)單"讓用八繼續(xù)填寫。（具體內(nèi) 容請參照悅）Java

3、Script13.2.2循環(huán)驗ilE表單在匕面的例子中,通過元素名稱判斷每一個文本 框是否輸入了文乙 這種方法使用起來比較方便, 源代碼看卜去也比較K觀。然而 For-對象的 eluents屬性可以返回所有農(nóng)單中的元素,因此 可以使用個循環(huán)來判斷elen?nts數(shù)組屮対象 的vnhe屬件值的長度是否為0來驗證農(nóng)單。（具 體內(nèi)容請參照巧。）JavaScript13.2.3設(shè)置表單的提交方式在表單填寫完畢Z/Ti,可以將衣單捉交到一個接 收表單內(nèi)容的地方。通常的做法是.將表單提交 到一個動態(tài)網(wǎng)頁.動態(tài)網(wǎng)頁接收到表單的內(nèi)容Z 后 將斤寫入數(shù)據(jù)庫或以文木形式記錄在服務(wù)器 以便日后使用。而另種做法是,將

4、表單內(nèi)容作 為E.a訂的內(nèi)容發(fā)送到一個指定的郵箱中。F面的 例滬可以讓用戶自己選擇將表單以哪種方法提血 （具體內(nèi)容請參照書。）,JavaScript13.2.4重置表單的提示在默認(rèn)情況下,如果用戶單擊了重置表單按鈕, 瀏覽器窗口就會馬卜將表單中的所有元素的值設(shè) 胃為初始狀態(tài)。如果用八一不小心單擊了該按鈕 則會清除所何已經(jīng)填耳完畢的數(shù)據(jù)。為了防止這 種總外請況的出現(xiàn)，可以J Ci HIM.彈 出一個確認(rèn)框，讓用戶確認(rèn)是否匝置表單。（具 體內(nèi)容請參照巧。13.2.5不使用提交按鈕提交表單通衣在表單中,都是使用單擊提交按鈕的方法來 提交表單。然而在For對彖中有一個sub.it （） 方法，使用該方

5、法可以在不使用提交按鈕的情況 卜提交衣氓。（具體內(nèi)容請參照I幾）13.3表單元素 For表單中可以存在很多表單元素,通常在瀏覽 器窗口中,看不到Foni元素,但是可以看到這些 表單元索。JavaScript13. 3. 1表單元素 ffiHTMlJp定義的表單元索有很多,這些表單元索 可以讓用戶輸入文字.如文本框密碼框等：或 肴讓用戶選擇可選項,如下拉列表禺復(fù)選框等; 也可以讓用戶提交信息或更置農(nóng)單,如提交按鈕 慮置按鈕等：還可以為程序員提供開發(fā)上的便利，如隱藏框等。在HTML 4.01中所規(guī)定的農(nóng)單 元素如表134所示。（具體內(nèi)容請參照書。）13. 3.2表單元素的命名JavaScript在

6、上一節(jié)中可以看出,for»標(biāo)簽與/fom標(biāo)簽 Z間可以在很多我單元素。F”對象屮可以使 用ele«ents數(shù)組來獲得代表這些表單元素的子 対彖。elenentsf數(shù)組中存放的是各種類型的 Fotii對象的子對象,eleaents數(shù)組中的元素足 lhform標(biāo)簽與/forn標(biāo)簽Z間我單元素所組成, 因此可以使用以下代碼來獲得代表HTMI.文檔中的 第1個Fom對彖中的第2個元素的對象。 容請參照尬13.4文本框任HTMI屮，文本框包括單行文本框和多行文本框 兩種。密碼框可以看成是一種特殊的單行文本框 在密碼框中輸入的文字將會以掩碼形式出現(xiàn)。13.4. 1文本框的創(chuàng)建方式在HT

7、ML代碼中,創(chuàng)建單行文本框與創(chuàng)建密碼框所 使用的元索祁是i nput元素.其譏法代碼如下所示: <input type=l）oxType nanie-boxNaiie value-boxVaiue size二boxSizeaxlengthlengths> （具體內(nèi)容請參照甘。）13.4.2文本框?qū)傩源挛谋究虻膶﹀璺Q為Text對象、代衣多行文本 框的對象稱為Text area對象、代表密碼框的對象 稱為Password對象。無論定Text對像、Text area 對敘 還是Password對彖,所擁有的屬性人多都 是相同的。（具體內(nèi)容請參照I人）13.4.3 文本框方法無論是 Te

8、xt 對象、Text area 對象,還 /Password 對象，所擁有的方法都是相同的。這些方法大多 都與文本框中的文本相關(guān),（具體內(nèi)容請參照 書。）JavaScript13.4.4文本框的事件無論足Text 刈彖、TextareaXj 象，還足Password 對彖,可以響應(yīng)的事件都是相同的。這些葦件大 多都9文本框小的文本相關(guān).（11體內(nèi)容請參照 書。）13.4. 5限制文本框中輸入的字?jǐn)?shù)13.4.5.1在輸入文字時判斷輸入字?jǐn)?shù)13. 4. 5. 2在提交數(shù)據(jù)時判斷輸入？數(shù)13.4.5.3在失去然點(diǎn)時判斷輸入字?jǐn)?shù)JavaScript13.4. 6動選擇文木框中的文字13M.6. 1鼠標(biāo)

9、經(jīng)過文本框時選擇文本13.4.6.2鼠標(biāo)經(jīng)過文木框時請除文本 13. 4. 6. 3進(jìn)一步完善13.5按鈕在HBfl.中,按鈕分為三種,分別為：普通按鈕 （Button對象）、提交按鈕（Sublit對象和重 胃按鈕（Reset對象）。從功能卜看起來泮通按 鈕左要作用是用來激活函數(shù);提交按鈕的主要作 用足捉交衣單：匝置按鈕的匸耍作用是匝置農(nóng)單。 雖然1種按鈕的功能有所不同.但是這1種按鈕 的屬也 方法和事件幾乎都是完全相同的。JavaScript13. 5. 1按鈕的創(chuàng)建方式在HTML屮仃兩種元索郁可以創(chuàng)建按鈕，這兩種元 素分別為i nput.元素和button元素。13. 5. L 1使用bu

10、tt on/G索創(chuàng)建按鈕 13. 5. 2. 2使用input元素創(chuàng)建按鈕13. 5.2按鈕的屬性無論是Submit對彖、Reset對象還是Button對象, 所擁仃的屬性都是相同的。（具體內(nèi)容請參照 書。）JavaScript13. 5.3按鈕的方法無論 Ji Submit 對象、Reset 對象還 Button X*J 象. 所擁有的方法都是相同的。（具體內(nèi)容請參照 書。）JavaScript13. 5.6改變多彳f文木框人小13. 5.4按鈕的事件無論是Submit對象、Reset對象還足Blit ton對象, 可以響應(yīng)的事件都是相同的。（具體內(nèi)容請參照 書。）JavaScript13.

11、 5.5網(wǎng)頁調(diào)色板在設(shè)計網(wǎng)頁時，常常需耍設(shè)計網(wǎng)頁的肋景色和背 杲色。只仃詢杲色與背景色搭配協(xié)調(diào)網(wǎng)頁才會好 看。然而在網(wǎng)頁匕調(diào)試詢景色和背景色并不是很 方便,因此町以制作個簡帕的網(wǎng)頁調(diào)色板程序, 用來測試詢景色與背景色的搭配是否協(xié)調(diào)。（具 體內(nèi)容請參照I人）JavaScript多行文本框中通?？梢暂斎牒芏辔淖?如果文字 內(nèi)容比較多的話.篡行文本框會門動產(chǎn)工滾動條. 此時可以加大多行文本框的寬度或高度來瀏覽其 屮文字,就會更加方便些。（具體內(nèi)容請參照ST JavaScript13.6單選框和復(fù)選框單選框（Radio對象）與復(fù)選（CheckboxXJ象）， 看卜去好像是兩個完全不同的對彖。但書實匕

12、這兩個對象除了一個能單選 一個可以篡選Z外， 其屬性方法和事件兒乎足完全相同的。13. 6. 1創(chuàng)建單選框和復(fù)選框在HTMI沖使用input元索同樣可以創(chuàng)建單選框與復(fù) 選框。其語法代碼如下所示： < input type=Type vaue=value nane=iuuie>Text （具體內(nèi)容請參書。>JavaScript13. 6.2單選框和復(fù)選框的屬性無論足RadioX'J %還足（heckboxX'J象，所擁仃的屬 性都是相同的常用的Radio對象和Checkbox對象 的屬性（具體內(nèi)容請參照書。）13. 6.5設(shè)置單選框組與復(fù)選框紐無論JiRadio

13、對彖還是Checkbox對彖，所擁仃的方 法都是相同的常用的Radio對象和Checkbox對象 的方法如表（具體內(nèi)容請參照書。）JavaScript13. 6.4單選框和復(fù)選框的事件無論足RadioX'J象還足Checkbox對象,可以響應(yīng)的 事件都是相同的。常用的Rad i o對彖和（:heckbox對 彖（具體內(nèi)容請參照書。只有在少數(shù)情況下單選框和復(fù)選框會單獨(dú)使用, 人女?dāng)?shù)單選框與復(fù)選框都會以組的方式出現(xiàn)。創(chuàng) 建單選框組9父選框組，只需要將na.eHntt設(shè) 置成為相同的即可。以下代碼為個單選框組, 在該代碼屮,兩個單選框選項屮,只能有個選 項處丁被選中狀態(tài)。 <input

14、 type=/rra(lio?/ value二"男" name二"町Sex"男 <input type=/rra(lio/z value=/4：/， nae二"ySex">女(具體內(nèi)容請參照巧。13. 6.6設(shè)置單選框與復(fù)選框的默認(rèn)選項在單選框與復(fù)選框為小，郴可以使用checked屈性 來設(shè)置默認(rèn)的選項。chPckedHn沒仃屬件值。JavaScript13. 6. 7 Form對象與Rad i oM象、 Checkbox 對彖雖然單選框與復(fù)選框經(jīng)常以組的形式出現(xiàn)，但是 在一個組中每個選項祁是一個獨(dú)立的單選框與復(fù) 選框。在

15、Fot對彖中,會將每個單選框與復(fù)選椎 看成足個獨(dú)立的對象,而不足將每個單選框組 與復(fù)選框組看成足-個獨(dú)工的対嫁。每個單選框 與復(fù)選框都有屬丁自己的屈件和方法。（具體內(nèi) 容請參照書。）JavaScript13. 6.8組與選項既然單選框與父選框可以以組的形式出現(xiàn)，那么 就應(yīng)該町以以組為單位獲取單選框組與復(fù)選框組 中的選項。在JavaScript中將naae屬性值相同 的單選框和復(fù)選框都放在了 個數(shù)組中,這樣， 就可以針對某個單選框組或父選框組進(jìn)行操作了。JavaScript13. 6.9獲取單選框與復(fù)選框的值無論是單選框組還是復(fù)選框，其目的是讓用戶選 擇,并且可以獲得用戶選擇的選項。使用chec

16、ked 屬性町以判斷用八是否選擇了單選框組9父選框 組中的選項。13. 6.10限制復(fù)選框的選擇項數(shù)雖然住父選框組屮可以允許用戶選擇多個選項， 但是在某些時候可能要求用戶只能選取其中的幾 項。例如在學(xué)校里，學(xué)生可以自匸選課.但是有 町能在某個學(xué)期里，學(xué)生最多只能選擇6門課程。 這就耍求在用八選擇的復(fù)選框超過某個數(shù)砒的時 候，給出提示。（具體內(nèi)容請參照）13.7下拉列表框下拉列我框（Select對彖）也可以顯示單項或多 項選擇。但是與單選框組和多選框組不同。單選 框組號多選框組中毎一個選項祁是Fot對象的一 個了對象.而卜拉列衣框榕體是FornX的個 子對象。下拉列農(nóng)框中的選項（Option対彖

17、）只 是下拉列表框的子對象。JavaScript13. 7. 1創(chuàng)建下拉列表框創(chuàng)建F拉列衣框需耍用到兩個元索，汁先要用到 的是select元素用丁標(biāo)記下拉列表框開始.然 后耍用到的是option元索.用于創(chuàng)建下拉列表框 電的項比如果個F拉列表框里有多個可選項 則重復(fù)使用option元素。JavaScript13. 7.4卜拉列表框的事件與其他Foe對象的子對象相同,Select對象也擁 冇一些屬丁自己的屬性。（其體內(nèi)容請參照出。）JavaScript13. 7.3卜拉列表框的方法（具體內(nèi)容請參照巧。）（具體內(nèi)容請參!«I5O ）13. 7.5選項對象創(chuàng)建下拉列表框必須要使用兩個HTM

18、L元索,其中 select元素用于聲明下拉列表框,option元素用 F創(chuàng)建F拉歹iJ表框中的選項。在JavaScript中, 將下拉列表框中的每個選項看成是 個Option 對象。13. 7.6選項對彖屬性 Option對彖雖然是Select對象的f対彖，但該対 彖也擁仃屬丁口己的屬件。13. 7. 7同時顯示多行的卜拉列表框詢面例子中的下拉列衣框在網(wǎng)貝上祁只顯示一行, 在HTML 4. 01中，可以創(chuàng)建同時顯示多行的下拉列 表框。創(chuàng)建同時顯示多行的下拉列表框,只需1? 設(shè)置size屬性即町。（具體內(nèi)容請參照|幾）13. 7.8可以同時選擇多個選項的下拉列 表框在默認(rèn)惜況下，一個下拉列我框只

19、能冇一個選項 被選屮此時與單選框組類似©但是在為select 元素設(shè)置了miltiple屬性之后,就可以同時選擇 多個選項，此時與復(fù)選框類似。nultiple®性沒 仃屈忤值。（具體內(nèi)容請參!® I5o）13. 7.9利用下拉列表框翻頁在下拉列表框小，可以將選項值設(shè)置為要跳轉(zhuǎn)的 URL,通過Select對象的value屬性值可以得到該 跳轉(zhuǎn)的URL。再通過Location對彖的href屬竹冋以 跳轉(zhuǎn)頁而。13.8文件上傳框利用下拉列表框的多選、多行顯示,以及慶意添 加.刪除H中選項的特點(diǎn)可以制作一個簡單的 選課程序。13. 7.11二級聯(lián)動菜單_1級聯(lián)動菜單就足為

20、第1個菜單的選項改變時，第 2個菜單中的選項會隨之改變。當(dāng)然,除了有二級 聯(lián)動菜單Z外，還町以仃三級、四級聯(lián)動菜單 創(chuàng)建這些聯(lián)動菜氓的原理祁是相同的。（具體內(nèi) 容請參照|5o ）文件上傳框(FilelploadXj)從某個角度匕看 與文本框很相似，但是文件匕傳框是山一個文本 框9一個按鈕共同組成。單擊按鈕后會出現(xiàn)一個 町以選擇文件的對話框。選擇文件后,文件的路 彳仝會顯示在文本框屮。Wil 學(xué)/JavaScript I =二=二匸I H 二13. 8.1創(chuàng)建文件上傳框在HTML代碼屮，可以使用inputA；來創(chuàng)建文本上 傳框，其語法代碼如下所示： <input type二"fi

21、le" iiane=nane size二size(具 體內(nèi)容請參照書。)學(xué)/JavaScriptf I 二工二13. 8.2文件上傳框的屬性（具體內(nèi)容請參Jiftlio）13. 8.3文件上傳框的方法（具體內(nèi)容請參煮巧。）13. 8.6圖片預(yù)覽（具體內(nèi)容請參JKtlio）13. 8.5使用文件上傳框的注總事項文件上傳框比較簡單,但使用該對象時有以下兒 點(diǎn)是需要注意的：由于文件上傳框通常用于上傳文件，而文件上傳 所用到的表單數(shù)據(jù)編碼方式和傳輸方式與泮通的 文本不同，I人I此必須耍在fori尤索中設(shè)置enctype 屬性與method屬性，其中euctype屬性值必須為JavaScrip

22、tMiulitipart/fom data"* ethod屬性"post% （人體內(nèi)容請參照書。）在論壇中發(fā)貼的時候、在網(wǎng)匕賣東西的時候,常 常需耍匕傳圖片。通常的做法是使用文件匕傳框 選擇要匕傳的圖片.然后單擊提交按鈕上傳圖片. 常常何粗心的用戶在選擇文件的時候選錯文件, 如果能讓用戶在選擇完圖片之后,在上傳圖片之 繭 可以先預(yù)覽一下圖片,這樣將會大大減少出 錯率。（具體內(nèi)容請參照|幾）JavaScript 13.9隱藏域隱藏域（Hidden對象）是不會在瀏覽器窗口中顯 示的對象，因此該對象多用丁向服務(wù)器提交一些 不希望用戶看到的數(shù)據(jù)。JavaScript 13. 9.3輸入提示在HTMI沖可以使Hjinput元素創(chuàng)建隱誡域，具譏法 代碼如下所示： <input type二"hidden" naiie=nane value=value>其中屬性解釋如下:nano：隱藏域的名稱。value：隱藏域的值13. 9.2隱藏域的屬性因為H idden對象在瀏覽器窗