2024年-Form表單對(duì)象詳解學(xué)習(xí)課件_第1頁
2024年-Form表單對(duì)象詳解學(xué)習(xí)課件_第2頁
2024年-Form表單對(duì)象詳解學(xué)習(xí)課件_第3頁
2024年-Form表單對(duì)象詳解學(xué)習(xí)課件_第4頁
2024年-Form表單對(duì)象詳解學(xué)習(xí)課件_第5頁
已閱讀5頁，還剩77頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Form表單對(duì)象詳解作者：裘森偉1前言Form對(duì)象是Document對(duì)象的子對(duì)象，這在第十四章已經(jīng)提到過。Form對(duì)象是用戶和程序之間進(jìn)行交互的重要工具，同時(shí)通過From對(duì)象為用戶提供大量的信息。在本節(jié)中就來對(duì)From對(duì)象及其元素對(duì)象進(jìn)行詳解。2第一章表單對(duì)象在javascript程序中，使用Form標(biāo)記來創(chuàng)建表單對(duì)象。通常在Form標(biāo)記對(duì)中定義了表單控件標(biāo)記，這些表單控件標(biāo)記就創(chuàng)建了form元素對(duì)象。創(chuàng)建表單對(duì)象非常容易，這里就不再多講解了。在本節(jié)中主要來學(xué)習(xí)如如何訪問表單對(duì)象和如何對(duì)表單對(duì)象進(jìn)行操作。31.1訪問表單對(duì)象及元素對(duì)象已經(jīng)知道表單對(duì)象是document對(duì)象的子對(duì)象，所以可是使用document對(duì)象的forms屬性來對(duì)表單對(duì)象進(jìn)行訪問。一個(gè)復(fù)雜的HTML文檔可以具有多個(gè)form標(biāo)記對(duì)，也就是具有多個(gè)表單對(duì)象。當(dāng)通過document對(duì)象的forms屬性來對(duì)多個(gè)表單對(duì)像進(jìn)行訪問時(shí)，既可以使用數(shù)組下標(biāo)來指定表單對(duì)象，也可以使用表單名稱作索引來指定表單對(duì)像。41.1訪問表單對(duì)象及元素對(duì)象代碼：<htmlxmlns="/1999/xhtml"><head><title>訪問表單及元素對(duì)象</title></head><body><h1>訪問表單及元素對(duì)象</h1><form><inputtype="text"name="mytext"/></form><formname="myform"><inputtype="text"name="mytext"/></form><scriptlanguage="javascript"type="text/javascript"><!-- document.forms[0].mytext.value="通過數(shù)組小標(biāo)訪問表單對(duì)象"; document.forms["myform"].mytext.value="通過表單名稱訪問表單對(duì)象";//--></script></body></html>51.1訪問表單對(duì)象及元素對(duì)象通過表單名稱來訪問表單不但可以通過document對(duì)象的forms屬性作數(shù)組索引的方式，還可以直接使用。在實(shí)際開發(fā)中，通過直接使用表單名稱來訪問表單，因?yàn)檫@樣是最簡(jiǎn)單的方法。61.1訪問表單對(duì)象及元素對(duì)象代碼：<htmlxmlns="/1999/xhtml"><head><title>訪問表單及元素對(duì)象</title></head><body><h1>訪問表單及元素對(duì)象</h1><formname="myform"><inputtype="text"name="mytext"/></form><scriptlanguage="javascript"type="text/javascript"><!-- document.myform.mytext.value="直接使用表單名稱訪問表單對(duì)象f";//--></script></body></html>71.1訪問表單對(duì)象及元素對(duì)象除了這種方法外，還可以使用表單對(duì)象的elements屬性來訪問表單元素。Elements屬性的使用和document對(duì)象的forms屬性的使用相同。通過表單對(duì)象的elements屬性得到的是該表單中的元素的數(shù)組。同樣既可以使用數(shù)組下表來訪問表單元素，也可是使用元素名稱作索引來訪問表單元素。81.1訪問表單對(duì)象及元素對(duì)象代碼：<htmlxmlns="/1999/xhtml"><head><title>訪問表單及元素對(duì)象</title></head><body><h1>訪問表單及元素對(duì)象</h1><formname="myform1"> <inputtype="text"name="mytext1"value="這是第一個(gè)文本框"> <inputtype="text"name="mytext2"value="這是第二個(gè)文本框"></form><formname="myform2"> <inputtype="button"name="button1"value="a按鈕"> <inputtype="button"name="button2"value="b按鈕"> <inputtype="button"name="button3"value="c按鈕"></form> <scriptlanguage="javascript"type="text/javascript"><!-- document.write(document.myform1.mytext1.value+""); document.write(document.myform1.elements["mytext2"].value+"<br>"); document.write(document.myform2.elements[0].value+""); document.write(document.myform2.elements[1].value+""); document.write(document.myform2.elements[2].value+"");//--></script></body></html>91.2設(shè)置表單對(duì)象在javascript中，定義了一系列的屬性和方法來設(shè)置表單對(duì)象。其中name屬性和elements屬性已經(jīng)講解過，name屬性表示表單的名稱，使用它可以對(duì)相應(yīng)的表單進(jìn)行訪問。Elements屬性表示表單中的元素，使用elements屬性可以得到表單元素?cái)?shù)組。表單對(duì)象還有一個(gè)和elements屬性有關(guān)的屬性，那就是length屬性。通過使用length屬性可以得到表單中表單元素的數(shù)量。101.2設(shè)置表單對(duì)象代碼：<htmlxmlns="/1999/xhtml"><head><title>設(shè)置表單對(duì)象</title></head><body><h1>設(shè)置表單對(duì)象</h1><formname="myform"> <inputtype="text"name="mytext"value="這是一個(gè)文本框"> <inputtype="button"name="button"value="a按鈕"></form><scriptlanguage="javascript"type="text/javascript"><!-- varnnumber1=document.myform.length; varnnumber2=document.myform.elements.length; document.write("<h3>表單中的表單元素?cái)?shù)量為："+nnumber1); document.write("<h3>表單中的表單元素?cái)?shù)量為:"+nnumber2);//--></script></body></html>111.2設(shè)置表單對(duì)象表單對(duì)象還有一個(gè)action屬性。Action屬性表示當(dāng)表單提交時(shí)做執(zhí)行的內(nèi)容。在通常情況下，action屬性值為表單數(shù)據(jù)要發(fā)送到的服務(wù)器的URL地址。在實(shí)際應(yīng)用中幾乎都是這樣的，但是在測(cè)試或者寫單機(jī)程序時(shí)，action屬性的值還可以為其他的內(nèi)容。121.2設(shè)置表單對(duì)象代碼：<htmlxmlns="/1999/xhtml"><head><title>設(shè)置表單對(duì)象</title></head><body><h1>設(shè)置表單對(duì)象</h1><formname="myform"action="javascript:alert('提交的表單數(shù)據(jù)位')"> <inputtype="submit"name="mybutton"value="提交"></form></body></html>在本程序中，使用action屬性將表單中的數(shù)據(jù)提交給一個(gè)javascript程序，彈出一個(gè)javascript信息對(duì)話框，顯示一條“提交的表單數(shù)據(jù)為”的信息。這種形式的action屬性在實(shí)際開發(fā)和測(cè)試中經(jīng)常被使用到，這種使用消耗的資源很少，單機(jī)就可以完成。131.2設(shè)置表單對(duì)象表單對(duì)象還有一些屬性，他們都和網(wǎng)絡(luò)操作有關(guān)，這里已經(jīng)操作了本ppt的范圍i，就不再講解了。需要提一下的是method屬性，method屬性有兩個(gè)值分別為get和post。他們表示傳輸信息的格式，默認(rèn)情況下為get。當(dāng)發(fā)現(xiàn)程序正確時(shí)，但是傳輸不正常時(shí)，就可以通過method屬性的值對(duì)程序進(jìn)行改動(dòng)。表單對(duì)象還有兩個(gè)方法，分別是reset方法和submit方法。還有兩個(gè)事件，分別是onreset事件和onsubmit事件。這些內(nèi)容會(huì)在講解重置按鈕和提交按鈕時(shí)進(jìn)行講解。14第二章按鈕對(duì)象從本節(jié)開始就來學(xué)習(xí)表單中的表單元素對(duì)象。在本節(jié)中就來講解表單元素中最簡(jiǎn)單的按鈕對(duì)象。按鈕對(duì)象具有許多表單元素對(duì)象共用的內(nèi)容，同時(shí)按鈕對(duì)行啊還分為普通按鈕、提交按鈕和重置按鈕。按鈕存在很多特效效果，這里也將對(duì)圖片按鈕進(jìn)行簡(jiǎn)單介紹。152.1公用內(nèi)容表單元素對(duì)象具有很多公用的內(nèi)容，包括表單元素對(duì)象的屬性、方法和事件。首先每個(gè)表單元素對(duì)象具有name屬性，也就是每個(gè)表單元素都應(yīng)該具有名稱。當(dāng)然在定義表單元素時(shí)可以不給出name屬性，但這是一種不好的習(xí)慣。每個(gè)由input標(biāo)記定義的表單元素對(duì)象還都具有form屬性。使用form屬性可以得到該表單元素對(duì)象所在表單的引用。配合使用form屬性和this語句能夠很好的對(duì)表單和表單中的其他表單元素對(duì)象進(jìn)行訪問。162.1公用內(nèi)容代碼：<htmlxmlns="/1999/xhtml"><head><title>表單對(duì)象共用內(nèi)容</title><scriptlanguage="javascript"type="text/javascript"><!-- functionmyfunction(bt) { alert("表單名稱為："+); }//--></script></head><body><h1>表單對(duì)象共用內(nèi)容</h1><formname="myform"> <inputtype="button"name="mybutton"value="按鈕"onClick="myfunction(this.form)"></form></body></html>在本程序中，使用this語句來指代所在的表單表單元素對(duì)象，也就是程序中的按鈕對(duì)象。然后使用該按鈕對(duì)象調(diào)用form屬性得到該按鈕對(duì)象所在的表單對(duì)象。最后將該表單對(duì)象傳給函數(shù)，就可以得到該表單中具體的信息，在本程序中得到的是表單的名稱。172.1公用內(nèi)容每個(gè)由input標(biāo)記定義的表單元素對(duì)象都有type屬性。使用type屬性來設(shè)置該表單元素對(duì)象是那一種元素。每個(gè)表單元素對(duì)象還都具有獲得焦點(diǎn)方法和失去焦點(diǎn)方法，同時(shí)也具有獲得焦點(diǎn)事件和失去焦點(diǎn)事件。182.2普通按鈕按鈕的value屬性值為按鈕上的內(nèi)容，在使用input標(biāo)記定義按鈕時(shí)，直接通過value屬性來設(shè)置按鈕上的內(nèi)容。而在使用button標(biāo)記定義的按鈕時(shí)，直接將要在按鈕上顯示的內(nèi)容放在button標(biāo)記對(duì)間。192.2普通按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>普通按鈕</title></head><body><h1>普通按鈕</h1><formname="myform"> <inputtype="button"name="mybutton1"value="a按鈕"> <buttonname="mybutton2">b按鈕</button></form></body></html>202.2普通按鈕按鈕對(duì)象具有click方法，也就是單機(jī)方法。但是click方法并不可靠，所以盡量不要使用它。和click方法相似的是onclick事件。Onclick事件是日常開發(fā)和實(shí)際應(yīng)用中最常見的事件之一。212.2普通按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>普通按鈕onclick事件</title><scriptlanguage="javascript"type="text/javascript"><!-- functionmyfunction() { alert("發(fā)生單機(jī)按鈕事件"); }//--></script></head><body><h1>普通按鈕onclick事件</h1><formname="myform"> <inputtype="button"value="按鈕"onClick="myfunction()"></form></body></html>222.3提交按鈕提交按鈕時(shí)一種特殊的按鈕，他具有按鈕對(duì)象的所有屬性、方法和事件。提交按鈕是表單的重要組成部分，在實(shí)際應(yīng)用中，如果表單不進(jìn)行提交，就沒有意義。提交表單也是通過input標(biāo)記定義的，雖然提交按鈕是一種特殊的按鈕，但他的type屬性值并不是button，而是提交按鈕特有的submit。提交按鈕不需要設(shè)置value屬性值，他具有默認(rèn)的value屬性，當(dāng)然為了更明確的表達(dá)自己的意思，也可以設(shè)置自己想要的value值。232.3提交按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>提交按鈕value屬性</title></head><body><h1>提交按鈕value屬性</h1><formname="myform1"> <inputtype="submit"></form><formname="myform2"> <inputtype="submit"value="提交"></form></body></html>在本程序中，第一個(gè)提交按鈕采用的是默認(rèn)的value值，提交按鈕的默認(rèn)value屬性值為“提交查詢內(nèi)容”；第二個(gè)是自定義的”提交”。242.3提交按鈕在默認(rèn)情況下，單擊提交按鈕就會(huì)觸發(fā)onsubmit提交事件，將表單中的數(shù)據(jù)提交到表單對(duì)象action屬性指定的位置。當(dāng)然也可以通過onsubmit事件來設(shè)置，只要將onsubmit事件的返回值設(shè)置為false就可以改變默認(rèn)值。252.3提交按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>提交按鈕onsubmit事件</title></head><body><h1>提交按鈕onsubmit事件</h1><formname="myform1"action="javascript:alert('開始提交')"> <inputtype="submit"value="默認(rèn)提交"></form><formname="myform2"action="javascript:alert('開始提交')"onSubmit="returnfalse"> <inputtype="submit"value="自定義提交"></form></body></html>單擊“自定義提交”按鈕則不會(huì)發(fā)生任何事件，這是因?yàn)閷nsubmit事件的結(jié)果設(shè)置為false。262.3提交按鈕在實(shí)際開發(fā)中，既不采用默認(rèn)的提交事件，也不采用自定義提交按鈕的禁止onsubmit事件。而是采用在開打時(shí)自定義onsubmit事件，不真正的進(jìn)行提交；當(dāng)應(yīng)用部署時(shí)，將自定義的onsubmit事件去掉，讓其真正的進(jìn)行提交。272.3提交按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>提交按鈕onsubmit事件</title></head><body><h1>提交按鈕onsubmit事件</h1><formname="myform1"action=""onSubmit="alert('程序正確');returnfalse"> <inputtype="submit"value="提交"></form></body></html>這是一個(gè)在開發(fā)階段中的程序。如果程序一切正常，單擊提交按鈕就會(huì)發(fā)生自定義的onsubmit事件，彈出一個(gè)信息對(duì)話框，然后就返回false，而不是真正的提交。在進(jìn)行程序部署時(shí)，由于程序一切正常，將自定義的onsubmit事件去掉，就可以向action屬性指定的位置進(jìn)行提交。282.4重置按鈕重置按鈕和提交按鈕一樣，也是一種特殊的按鈕。使用重置按鈕能使表單中的內(nèi)容恢復(fù)到默認(rèn)的狀態(tài)。像文本框等表單元素對(duì)象一樣都有默認(rèn)值，如果發(fā)生改變后，可以使用重置按鈕將其恢復(fù)到默認(rèn)值。重置按鈕也是通過input標(biāo)記來定義，設(shè)置type屬性值為reset。同樣重置按鈕也具有默認(rèn)的value屬性，在默認(rèn)的情況下，單擊重置按鈕會(huì)觸發(fā)onreset重置事件。同樣也可以自定義value屬性值和自定義onreset事件，這些都和提交按鈕相同。292.4重置按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>重置按鈕</title></head><body><h1>重置按鈕</h1> <form> <inputtype="text"value="文本框的默認(rèn)信息"> <inputtype="reset"> </form></body></html>302.5圖片按鈕在平常的上網(wǎng)中，很少看到像例子這樣的按鈕，網(wǎng)頁中都是一些非常漂亮的按鈕，甚至還有一些感覺不是按鈕的按鈕。這些都是通過程序的編寫，制作出按鈕的特效。在本節(jié)中就來制作圖片按鈕。圖片按鈕時(shí)最常見的一種特效按鈕，可以先制作漂亮的圖片，在使用該圖片來制作按鈕。312.5圖片按鈕代碼：<htmlxmlns="/1999/xhtml"><head><title>圖片按鈕</title></head><body><h1>圖片按鈕</h1> <ahref="javascript:alert('這是一個(gè)圖片按鈕')"> <imgsrc="file:///C|/Users/gougou/Desktop/1.jpg"width="50"height="50"> </a></body></html>32第三章文本框?qū)ο笪谋究驅(qū)ο笫且环N基本的表單元素對(duì)象。使用文本框可以讓用戶通過鍵盤來輸入信息。文本框?qū)ο蠓譃楹芏喾N，最基本的文本框?qū)ο缶褪菃涡形谋究驅(qū)ο?，?duì)文本框?qū)ο筮M(jìn)行改進(jìn)又有密碼文本框、隱藏輸入對(duì)象和多行文本框?qū)ο蟆?33.1單行文本框單行文本框?qū)ο笫亲詈?jiǎn)單的，也是最基礎(chǔ)的文本框?qū)ο?。單行文本框通過input標(biāo)記設(shè)置type屬性值為text來定義。單行文本框具有size屬性，用來限制文本框顯示的長(zhǎng)度。需要注意的是，設(shè)置的size值并不是很精確。Size屬性也具有默認(rèn)值，在沒有要求顯示多少字符的情況下，就可以使用默認(rèn)值。單行文本框還具有一個(gè)value屬性。在定義單行文本框時(shí)，就可以設(shè)置value屬性，此時(shí)設(shè)置的value屬性值為單行文本框的默認(rèn)顯示內(nèi)容。343.1單行文本框代碼：<htmlxmlns="/1999/xhtml"><head><title>單行文本框value屬性</title><scriptlanguage="javascript"type="text/javascript"><!-- functionmyfunction() { varsstring=document.myform.mytext.value; alert(sstring); } functionmyfunction2() { document.myform.mytext.value="單行文本框設(shè)置后的內(nèi)容"; }//--></script></head><body><h1>單行文本框value屬性</h1> <formname="myform"> <inputtype="text"name="mytext"value="單行文本框的默認(rèn)內(nèi)容"><br> <inputtype="button"value="獲取value值"onClick="myfunction()"> <inputtype="button"value="設(shè)置value值"onClick="myfunction2()"> </form></body></html>353.1單行文本框需要注意的是，單行文本框的value值是字符型數(shù)據(jù)類型，在獲取和設(shè)置時(shí)，都是對(duì)字符進(jìn)行操作。當(dāng)想要設(shè)置或者獲取數(shù)值型數(shù)據(jù)類型的值時(shí)，javascript會(huì)盡可能的進(jìn)行自動(dòng)轉(zhuǎn)換，當(dāng)然也可以通過使用前面所學(xué)的辦法進(jìn)行轉(zhuǎn)換。這是很容易的，但當(dāng)是對(duì)象數(shù)據(jù)類型時(shí)，如數(shù)組對(duì)象，就很難辦了。當(dāng)設(shè)置單行文本框的value值為一個(gè)數(shù)組對(duì)象，就可以使用數(shù)組中的join方法轉(zhuǎn)換為字符串。當(dāng)想再獲取這個(gè)數(shù)組時(shí)，就可以使用數(shù)組中的split方法將字符串在轉(zhuǎn)換成數(shù)組。在對(duì)其他對(duì)象進(jìn)行操作時(shí)，也是使用這種轉(zhuǎn)換方法。363.1單行文本框文本框具有一個(gè)其他表單元素對(duì)象所沒有的select方法。使用select方法能使文本框內(nèi)的內(nèi)容高亮顯示。這樣的效果非常有用，當(dāng)文本框的內(nèi)容輸入有誤時(shí)，就會(huì)在提交時(shí)給出提示，然后讓該文本框中的內(nèi)容高亮顯示。這樣既可以起到提示用戶的作用，又可以讓用戶使用刪除鍵一鍵刪除。373.1單行文本框代碼：<htmlxmlns="/1999/xhtml"><head><title>單行文本框select方法</title><scriptlanguage="javascript"type="text/javascript"><!-- functionmyfunction() { varsstring=document.myform.mytext.value; if(sstring!="疑似地上霜."){ alert("填寫錯(cuò)誤，請(qǐng)?jiān)俅翁顚?); document.myform.mytext.select(); } }//--></script></head><body><h1>單行文本框select方法</h1> <formname="myform">

床前明月光,<inputtype="text"name="mytext"value="疑似地下霜."><br> <inputtype="button"value="測(cè)試"onClick="myfunction()"> </form></body></html>383.1單行文本框在所有表單元素對(duì)象的事件中，onchange事件是只有按鈕對(duì)象沒有的。當(dāng)對(duì)象的值發(fā)生改變時(shí)，觸發(fā)onchange事件。在本文框?qū)ο笾校瑢?duì)象值的改變就是指文本框中的內(nèi)容改變。393.1單行文本框代碼：<htmlxmlns="/1999/xhtml"><head><title>單行文本框onchange事件</title><scriptlanguage="javascript"type="text/javascript"><!-- functionmyfunction() { alert("文本框的內(nèi)容不能改變"); document.myform.reset(); }//--></script></head><body><h1>單行文本框onchange事件</h1> <formname="myform"> <inputtype="text"name="mytext"value="床前明月光，疑似地上霜."onClick="myfunction()"><br> <inputtype="submit"value="提交"> </form></body></html>403.2密碼框密碼框是通過input標(biāo)記設(shè)置typt屬性值為password來定義的。除此之外，密碼框的所有屬性、方法和事件都和單行文本框相同。密碼框和單行文本框的區(qū)別只是當(dāng)用戶輸入時(shí)，內(nèi)容顯示的不同。密碼框的這種黑點(diǎn)設(shè)置很好的為密碼等重要內(nèi)容提供了安全機(jī)制。當(dāng)向密碼框中輸入時(shí)，在客戶端是不能看到輸入的內(nèi)容的。而當(dāng)表單提交到服務(wù)器端時(shí)，服務(wù)器將得到密碼框中的實(shí)際內(nèi)容。在服務(wù)器對(duì)單行文本框和密碼框的操作時(shí)完全一樣的。413.2密碼框代碼：<htmlxmlns="/1999/xhtml"><head><title>密碼框</title></head><body><h1>密碼框</h1> <formname="myform">

用戶名:<inputtype="text"name="mytext"value="name"><br>

密碼：<inputtype="password"value="mima"> </form></body></html>423.3隱藏輸入對(duì)象隱藏輸入對(duì)象也是一種文本框，通過input標(biāo)記設(shè)置type屬性值為hidden來定義。所謂隱藏輸入是指雖然該對(duì)象存在于網(wǎng)頁中，但對(duì)于用戶而言是不可見的。隱藏輸入對(duì)象雖然也具有很多屬性、方法和事件，但大多是不能使用的，也沒有必要使用。隱藏輸入對(duì)象唯一能被使用到的兩個(gè)屬性為value屬性和name屬性。433.3隱藏輸入對(duì)象代碼：<htmlxmlns="/1999/xhtml"><head><title>隱藏輸入對(duì)象</title></head><body><h1>隱藏輸入對(duì)象</h1> <formname="myform"> <inputtype="hidden"name="myhidden"value="yincang"><br> </form></body></html>從運(yùn)行結(jié)果可以看出，在頁面中是沒有顯示任何表單元素對(duì)象的，但當(dāng)改變窗口大小時(shí)，能感覺到窗口中具有表單元素對(duì)象。隱藏輸入對(duì)象不可能被顯示出來，那他到底有什么用呢?

當(dāng)有些表單中的數(shù)據(jù)不想被用戶看到，但是這些數(shù)據(jù)又需要交給服務(wù)器時(shí)，這時(shí)候可以使用隱藏輸入對(duì)象來放置這些數(shù)據(jù)。443.4多行文本框多行文本框也叫做文本區(qū)，當(dāng)需要輸入大量?jī)?nèi)容時(shí)，或者需要進(jìn)行多行操作時(shí)，就可以使用多行文本框。多行文本框并不是通過input標(biāo)記來定義的，而是通過textarea標(biāo)記來定義。多行文本框具有文本框除了type屬性之外的所有屬性、方法和事件，除此之外，多行文本框還具有獨(dú)有的屬性。在這些獨(dú)有的屬性中，有兩個(gè)非常重要的屬性，那就是cols屬性和rows屬性。Cols屬性表示多行文本框一行能顯示的多少字符數(shù)，也就是多行文本框的寬度。Rows屬性表示多行文本框在不需要滾動(dòng)條的情況下，能完全顯示的行數(shù)，也就是多行文本框的高度。453.4多行文本框代碼：<htmlxmlns="/1999/xhtml"><head><title>多行文本框</title></head><body><h1>多行文本框</h1> <formname="myform"> <textareacols="50"rows="6">

靜夜思

--李白 床前明月光， 疑似地上霜。 舉頭望明月， 低頭思故鄉(xiāng)。

</textarea> </form></body></html>46第四章復(fù)選框和單選框復(fù)選框和單選框是兩個(gè)不同的表單元素對(duì)象，但是它們具有很多相同的地方。復(fù)選框和單選框都是讓用戶在多個(gè)選項(xiàng)中進(jìn)行選擇，所不同的是，在復(fù)選框中允許用戶選擇多個(gè)，但在單選框按鈕中只能選擇一個(gè)。474.1復(fù)選框復(fù)選框是允許用戶進(jìn)行多項(xiàng)選擇的表單元素對(duì)象。復(fù)選框中的選項(xiàng)具有兩種狀態(tài)，選中狀態(tài)和為選中狀態(tài)。復(fù)選框通過input標(biāo)記設(shè)置type屬性值為checkbox來定義。復(fù)選框也具有表單元素公用的內(nèi)容。484.1復(fù)選框代碼：<html> <head> <title>復(fù)選框</title> </head> <body> <h1>請(qǐng)選擇你的愛好</h1> <formname="myform"> <inputtype="checkbox"name="cb1"/>看書<br/> <inputtype="checkbox"name="cb2"/>上網(wǎng)<br/> <inputtype="checkbox"name="cb3"/>游戲<br/> </body></html>494.1復(fù)選框復(fù)選框具有一個(gè)非常有用的checked屬性。在定義復(fù)選框時(shí)，在input標(biāo)記中加入該屬性，則默認(rèn)該復(fù)選框選項(xiàng)就是選中狀態(tài)。<html> <head> <title>復(fù)選框</title> </head> <body> <h1>請(qǐng)選擇你的愛好</h1> <formname="myform"> <inputtype="checkbox"name="cb1"checked="checked"/>看書<br/> <inputtype="checkbox"name="cb2"checked="checked"/>上網(wǎng)<br/> <inputtype="checkbox"name="cb3"/>游戲<br/></form> </body></html>504.1復(fù)選框其實(shí)checked屬性值為布爾型，true表示選中，false表示未選中。當(dāng)直接給出checked屬性，就是起到設(shè)置true值的作用。復(fù)選框的checked屬性不但可以用來設(shè)置，還可以用來獲取。由于checked屬性值為布爾型，所以也可以將其用在if條件結(jié)構(gòu)語句等使用布爾值的語句中。514.1復(fù)選框代碼：<html> <head> <title>復(fù)選框checked</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction() { varbboolean=document.myform2.cb.checked; if(bboolean){ document.myform1.cb1.checked=true; document.myform1.cb2.checked=true; document.myform1.cb3.checked=true; }else{ document.myform1.cb1.checked=false; document.myform1.cb2.checked=false; document.myform1.cb3.checked=false; } } //--> </script> </head> <body> <h1>請(qǐng)選擇你的愛好</h1> <formname="myform1"> <inputtype="checkbox"name="cb1"checked="checked"/>看書<br/> <inputtype="checkbox"name="cb2"checked="checked"/>上網(wǎng)<br/> <inputtype="checkbox"name="cb3"/>游戲<br/> </form> <hr> <formname="myform2"> <inputtype="checkbox"name="cb"onClick="myfunction()">全選

</form> </body></html>524.2單選按鈕單選按鈕和復(fù)選框很相似，它具有復(fù)選框中幾乎所有的屬性、方法和事件。單選按鈕和復(fù)選按鈕的最大不同就是，單選按鈕只允許用戶在一組單選按鈕中選擇一個(gè)。單選按鈕也分為選中和未選中兩種狀態(tài)。當(dāng)選中其中一個(gè)后，其他的選項(xiàng)就變?yōu)槲催x中的狀態(tài)。單選按鈕通過input標(biāo)記設(shè)置type屬性值為radio來定義。通過將單選按鈕選項(xiàng)的name屬性定義為相同的值的方法來定義一組單選按鈕，在一組單選按鈕中只能選擇一個(gè)選項(xiàng)。同樣單選按鈕也具有checked屬性，表示默認(rèn)選中的選項(xiàng)，但一組中只能有一項(xiàng)使用checked屬性。534.2單選按鈕代碼：<html> <head> <title>單選按鈕</title> </head> <body> <h1>請(qǐng)選擇你最喜歡的愛好</h1> <formname="myform"> <inputtype="radio"name="rd"checked="checked">看書<br> <inputtype="radio"name="rd">上網(wǎng)<br> <inputtype="radio"name="rd">游戲<br> </form> </body></html>544.2單選按鈕由于單選按鈕中的每一個(gè)選項(xiàng)都具有相同的名稱，所以對(duì)單選按鈕中的每個(gè)選項(xiàng)進(jìn)行訪問時(shí)，只能使用數(shù)組的方法，而不能使用名稱進(jìn)行訪問。554.2單選按鈕代碼：<html> <head> <title>單選按鈕</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction1() { document.myform1.rd[0].checked=true; } functionmyfunction2() { document.myform1.rd[1].checked=true; } functionmyfunction3() { document.myform1.rd[2].checked=true; } //--> </script> </head> <body> <h1>請(qǐng)選擇你最喜歡的愛好</h1> <formname="myform1"> <inputtype="radio"name="rd"checked>看書<br> <inputtype="radio"name="rd">上網(wǎng)<br> <inputtype="radio"name="rd">游戲<br> </form> <formname="myform2"> <inputtype="button"value="選擇看書"onClick="myfunction1()"> <inputtype="button"value="選擇上網(wǎng)"onClick="myfunction2()"> <inputtype="button"value="選擇游戲"onClick="myfunction3()"> </form> </body></html>564.2單選按鈕由于單選按鈕中的選項(xiàng)組成了一個(gè)名稱相同的數(shù)組，從而使單選按鈕具有一個(gè)復(fù)選框沒有的屬性，那就是length屬性。使用length屬性能夠得到單選按鈕組中所具有的單選按鈕選項(xiàng)按鈕的數(shù)量。需要注意的是，當(dāng)單選按鈕中只有一個(gè)單選按鈕選項(xiàng)時(shí)，得到的length屬性的值并不是1，而是一個(gè)空值。574.2單選按鈕代碼：<html> <head> <title>單選按鈕length屬性</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction() { varsstring=document.myform1.rd.length; alert("選項(xiàng)數(shù)量為"+sstring); } //--> </script> </head> <body> <h1>請(qǐng)選擇你最喜歡的愛好</h1> <formname="myform1"> <inputtype="radio"name="rd"checked>看書<br> <inputtype="radio"name="rd">上網(wǎng)<br> <inputtype="radio"name="rd">游戲<br> </form> <formname="myform2"> <inputtype="button"value="選項(xiàng)數(shù)量"onClick="myfunction()"> </form> </body></html>584.2單選按鈕在使用單選按鈕時(shí)，并不是在所有的單選按鈕只能選擇一個(gè)，而是在一個(gè)單選按鈕組中只能選擇一個(gè)。594.2單選按鈕代碼：<html> <head> <title>單選按鈕注意點(diǎn)</title> </head> <body> <h1>你選擇你想去的地方</h1> <formname="myform"> <inputtype="radio"name="jihua"checked>北京<br> <inputtype="radio"name="jihua"><br> <inputtype="radio"name="jihua"><br> <inputtype="radio"name="huaxiang">月亮<br> <inputtype="radio"name="huaxiang"checked="checked">太陽<br> <inputtype="radio"name="huaxiang">銀河<br> </form> </body></html>60第五章列表對(duì)象列表對(duì)象分為下拉列表對(duì)象和選擇列表對(duì)象。列表對(duì)象也是讓用戶在多個(gè)選項(xiàng)中選擇，用戶可以選擇一個(gè)或者多個(gè)。在網(wǎng)頁中使用列表對(duì)象，可以利用相對(duì)較小的空間來提供大量的信息。定義列表對(duì)象和其他表單元素有很大的區(qū)別。定義列表對(duì)象需要select標(biāo)記和option標(biāo)記一起使用，使用select標(biāo)記來創(chuàng)建一個(gè)框?qū)ο?，而使用option標(biāo)記來創(chuàng)建框中的選項(xiàng)對(duì)象。615.1select框?qū)ο蠖x列表對(duì)象需要select標(biāo)記和option標(biāo)記同時(shí)使用，這樣列表對(duì)象中又分為框?qū)ο蠛瓦x項(xiàng)對(duì)象。而對(duì)列表對(duì)象的訪問和操作既有對(duì)框?qū)ο蟮脑L問和操作，又有對(duì)選項(xiàng)對(duì)象的訪問和操作。所以將本節(jié)分為兩個(gè)部分來分別對(duì)框?qū)ο蠛瓦x項(xiàng)對(duì)象進(jìn)行詳解。625.1select框?qū)ο蟠a：<html> <head> <title>列表對(duì)象</title> </head> <body> <h1>列表對(duì)象</h1> <formname="myform"> <select> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> </body></html>635.1select框?qū)ο笄懊嬲f到的列表對(duì)象分外下拉列表對(duì)象和選擇列表對(duì)象，而在該程序中只有下拉列表對(duì)象。下拉列表對(duì)象和選擇列表對(duì)象在定義時(shí)，只有由于select框?qū)ο笾衧ize屬性值的不同而有所不同。在默認(rèn)的情況下，size屬性值為1，也就是在框中只顯示1個(gè)選項(xiàng)，所以就是下拉列表對(duì)象的樣式。將size屬性值改為大于1的數(shù)值，得到的就會(huì)是一個(gè)選擇列表對(duì)象。645.1select框?qū)ο蟠a：<html> <head> <title>列表對(duì)象</title> </head> <body> <h1>列表對(duì)象</h1> <formname="myform"> <select> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> <formname="myform2"> <selectsize="3"> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> </body></html>655.1select框?qū)ο笠呀?jīng)知道列表對(duì)象是可以進(jìn)行多項(xiàng)選擇的。在列表對(duì)象中進(jìn)行多項(xiàng)選擇和操作系統(tǒng)中進(jìn)行多項(xiàng)選擇一樣，也是要配合鍵盤上的ctrl鍵和shift鍵來進(jìn)行操作。但對(duì)上個(gè)程序中的列表時(shí)不能進(jìn)行多選操作的，因?yàn)樵谀J(rèn)的情況下是不能進(jìn)行多項(xiàng)選擇的。通過使用select框?qū)ο蟮膍ultiple屬性可以設(shè)置列表對(duì)象是否能夠多選。665.1select框?qū)ο蟠a：<html> <head> <title>select框?qū)ο髆ultiple屬性</title> </head> <body> <h1>select框?qū)ο髆ultiple屬性</h1> <formname="myform"> <selectsize="3"multiple="multiple"> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> </body></html>multiple屬性的值為布爾型。這里也可以直接給出multiple屬性，他也表示設(shè)置值為true。5.1select框?qū)ο?75.1select框?qū)ο笥捎趕elect框?qū)ο笠簿哂卸鄠€(gè)選項(xiàng)，所以select框?qū)ο蠛蛦芜x按鈕一樣也具有l(wèi)ength屬性，也是得到選項(xiàng)的具體數(shù)量。和單選按鈕的length屬性不同的是，可以調(diào)整select框?qū)ο蟮膌ength屬性。通過調(diào)整select框?qū)ο蟮膌ength屬性可以減少列表對(duì)象中的選項(xiàng)。685.1select框?qū)ο蟠a：<html> <head> <title>select框?qū)ο髄ength屬性</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction() { document.myform1.myselect.length=0; } //--> </script> </head> <body> <h1>select框?qū)ο髄ength屬性</h1> <formname="myform1"> <selectsize="3"name="myselect"> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> <formname="myform2"> <inputtype="button"value="調(diào)整選項(xiàng)數(shù)量"onClick="myfunction()"> </form> </body></html>695.1select框?qū)ο骃elect框?qū)ο筮€具有options屬性，使用options屬性可以得到列表對(duì)象中的選項(xiàng)數(shù)組，然后使用數(shù)組小標(biāo)可以得到每個(gè)選項(xiàng)，這樣就可以對(duì)每一個(gè)選項(xiàng)進(jìn)行操作。同時(shí)select框?qū)ο筮€有一個(gè)selectedIndex屬性。selectedIndex屬性表示列表中被選中選項(xiàng)所在選項(xiàng)數(shù)組中的下標(biāo)。在使用selectedIndex屬性時(shí)需要注意的是，當(dāng)沒有選中選項(xiàng)時(shí)，使用selectedIndex屬性得到的結(jié)果為-1.已經(jīng)知道列表對(duì)象是可以進(jìn)行多項(xiàng)選擇，當(dāng)選擇多項(xiàng)后，使用selectedIndex屬性得到的結(jié)果并不是想象中的選項(xiàng)位置所組成的數(shù)組，而是這些選中選項(xiàng)中的第一個(gè)選項(xiàng)的數(shù)組下標(biāo)。705.1select框?qū)ο蟠a：<html> <head> <title>select框?qū)ο髎electedIndex屬性</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction() { varnnumber=document.myform1.myselect.selectedIndex; alert("你選擇的是第"+(nnumber+1)+"項(xiàng)"); } //--> </script> </head> <body> <h1>select框?qū)ο髎electIndex屬性</h1> <formname="myform1"> <selectsize="3"name="myselect"> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> <formname="myform2"> <inputtype="button"value="選中選項(xiàng)"onClick="myfunction()"> </form> </body></html>715.1select框?qū)ο骃elect框?qū)ο缶哂幸粋€(gè)非常重要的事件，那就是onchange事件。當(dāng)用戶選擇一個(gè)新選項(xiàng)時(shí)，就會(huì)觸發(fā)onchange事件。<html> <head> <title>select框?qū)ο髈nchange事件</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction() { varnnumber=document.myform1.myselect.selectedIndex; switch(nnumber) { case0:alert("你選擇的是看書");break; case1:alert("你選擇的是上網(wǎng)");break; case2:alert("你選擇的是游戲");break; } } //--> </script> </head> <body> <h1>select框?qū)ο髈nchange事件</h1> <formname="myform1"> <selectsize="3"name="myselect"onChange="myfunction()"> <option>看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> <formname="myform2"> <inputtype="button"value="選中選項(xiàng)"onClick="myfunction()"> </form> </body></html>725.2option選項(xiàng)對(duì)象首先來看option選項(xiàng)對(duì)象具有的最重要的屬性，那就是selected屬性。Selected屬性表示選項(xiàng)是否被選中，通過selected屬性可以設(shè)置和獲取選項(xiàng)選中的情況。Selected屬性值為布爾型，true表示選中，false表示未選中。735.2option選項(xiàng)對(duì)象代碼：<html> <head> <title>option選項(xiàng)對(duì)象selected屬性</title> </head> <body> <h1>option選項(xiàng)對(duì)象selected屬性</h1> <formname="myform"> <selectsize="3"name="myselect"> <optionselected="selected">看書</option> <option>上網(wǎng)</option> <option>游戲</option> </select> </form> </body></html>745.2option選項(xiàng)對(duì)象Option選項(xiàng)對(duì)象還有value屬性。Option選項(xiàng)對(duì)象的value屬性值并不是選項(xiàng)顯示的內(nèi)容，它是一種用戶看不到的，有程序獲取的信息。只有在特定的情況下，value屬性值才和option選項(xiàng)對(duì)象的選項(xiàng)內(nèi)容一樣。755.2option選項(xiàng)對(duì)象代碼：<html> <head> <title>select框?qū)ο髈nchange事件</title> <scriptlanguage="javascript"type="text/javascript"> <!-- functionmyfunction() { varnnumber=document.myform1.myselect.selectedIndex; varsstring=document.myform1.myselect.options[nnumber].value; alert(sstring); } //--> </script> </head> <body> <h1>select框?qū)ο髈nchange事件</h1> <formname="myform1"> <selectsize="3"name="myselect"> <optionvalue="看書能使人知識(shí)淵博"selected="selected">看書</option> <optionvalue="上網(wǎng)能獲取許多信息">上網(wǎng)</option> <o

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論