第11章表單11.1表單概述11.2form元素11.3input元素11.4列表與下拉菜單11.5文本域textarea11.6標(biāo)簽label11.7HTML5新增的元素屬性11.8表單元素的組織與布局11.9綜合實(shí)例返回11.1表單概述表單是用于實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽器與服務(wù)器(或者說(shuō)網(wǎng)頁(yè)所有者)之間信息交互的一種頁(yè)面元素，在互聯(lián)網(wǎng)上它被廣泛用于各種信息的搜集和反饋。例如，圖11-1顯示了一個(gè)用于進(jìn)行電子郵件系統(tǒng)登錄的表單。圖11-2顯示了一個(gè)稍微復(fù)雜的表單，其中包含更多種類(lèi)的表單控件:文本框、口令框、單選框、下拉菜單等?？偠灾?，表單不同于前面介紹的頁(yè)面元素(如表格、圖像等)，它不但需要在網(wǎng)頁(yè)中用HTML進(jìn)行顯示，而且還需要服務(wù)器端特定程序的支持。返回11.2form元素可用<form>標(biāo)記來(lái)定義一個(gè)表單，當(dāng)一個(gè)表單被定義后就可在表單內(nèi)放置表單標(biāo)記。表單使用<form>作為開(kāi)始標(biāo)記，以</form>結(jié)尾。在一個(gè)HTML頁(yè)面中允許有多個(gè)表單，以表單的名字(name)和id作為它們之間的區(qū)分。1.action在表單收集到信息之后，需要將收集到的信息傳遞給服務(wù)器，action屬性設(shè)置處理表單的服務(wù)程序。當(dāng)表單被提交后，表單中的數(shù)據(jù)就會(huì)發(fā)送給action的值所指定的程序進(jìn)行處理。表示表單的內(nèi)容提交給網(wǎng)址為www.htmlcss.com的服務(wù)器中的findmessage.asp頁(yè)面去處理。如果處理程序和當(dāng)前的HTML頁(yè)面在同一個(gè)目錄下面，還可以使用相對(duì)地址。下一頁(yè)返回11.2form元素2.methodmethod用于設(shè)置表單內(nèi)容向服務(wù)器提交時(shí)數(shù)據(jù)的傳送方式。method屬性有兩個(gè)可選取值.get和.post。(1)當(dāng)method="get”時(shí)，向服務(wù)器傳送數(shù)據(jù)的方式為get方式。在這種方式下，要傳送的數(shù)據(jù)會(huì)被附加在URL之后，被顯示在瀏覽器的地址欄中，而且被傳送的數(shù)據(jù)通常不超過(guò)255個(gè)字符。這種方式是method默認(rèn)的值，但對(duì)數(shù)據(jù)的保密性差，不安全。(2)當(dāng)method="post”時(shí)，向服務(wù)器提交數(shù)據(jù)采用post方式，這種方式傳送的數(shù)據(jù)量沒(méi)有限制其是以數(shù)據(jù)流的形式傳送表單數(shù)據(jù)，但速度比較慢。上一頁(yè)下一頁(yè)返回11.2form元素3.targettarget屬性主要用來(lái)控制表單提交后的結(jié)果顯示在哪里，規(guī)定鏈接的頁(yè)面打開(kāi)方式。4.namename屬性可以為表單指定一個(gè)名字，name屬性的作用主要是為了區(qū)分各個(gè)表單，因?yàn)樵谝粋€(gè)頁(yè)面中可能會(huì)有多個(gè)表單，或者一個(gè)表單處理程序需要處理多個(gè)頁(yè)面的表單，這個(gè)時(shí)候表單的名字就很重要了。表單的屬性設(shè)置并不會(huì)直接對(duì)頁(yè)面產(chǎn)生影響，主要是設(shè)置表單的內(nèi)在屬性，而不是表單的顯示內(nèi)容。如果想讓一個(gè)表單有意義，必須要有相應(yīng)的表單元素。表單元素又稱(chēng)為表單控件，如圖11-3所示是一個(gè)表單控件的示例。上一頁(yè)返回11.3input元素11.3.1文本框text最常用的表單控件是input，這一類(lèi)的表單控件被稱(chēng)為輸入類(lèi)控件，通過(guò)<<input>來(lái)標(biāo)記。輸入類(lèi)控件有很多種類(lèi)型，通過(guò)type屬性進(jìn)行設(shè)置。<input>標(biāo)記可以為表單提供單行文本輸入框、單選按鈕、復(fù)選按鈕、按鈕等。文本框以單行的形式顯示在頁(yè)面中。文本框提供最常用的文本輸入功能，在文本框內(nèi)可以輸入數(shù)字、文本和字母等。其語(yǔ)法為:<inputtype”text”name="fieldname"id”IDname"class="classname"size="fieldsize"value="defaultvalue"maxlength="maximumfieldsize"/>下一頁(yè)返回11.3input元素其中:(1)class屬性為文本框指定類(lèi)名。(2)id為文本框指定標(biāo)識(shí)符。(3)name為文本框指定一個(gè)名字。(4)type屬性用于設(shè)置<<input>標(biāo)記的類(lèi)型，當(dāng)type="text”時(shí)指定為文本輸入框。(5)value屬性為文本框設(shè)置默認(rèn)值，當(dāng)文本框中有輸入后，這個(gè)值被改變，它可以被腳本語(yǔ)言所引用。(6)size和maxlength屬性用于設(shè)置文本框輸出區(qū)的大小和輸入內(nèi)容的最大長(zhǎng)度，這兩個(gè)值可以不相同，當(dāng)size缺省時(shí)，其默認(rèn)大小為12。上一頁(yè)下一頁(yè)返回11.3input元素11.3.2密碼框password密碼框的外觀和文本框沒(méi)有太大區(qū)別，但是在該控件中輸入的內(nèi)容會(huì)用*號(hào)顯示。其語(yǔ)法為<inputtype="password"name="fieldname"value="defaultvalue"size="fieldsize”/>type指定了input標(biāo)記的類(lèi)型，其他屬性的作用與文本框中屬性的作用相同。11.3.3單選框radio在很多選擇操作中，常常需要在多個(gè)項(xiàng)中選一個(gè)。在<input>標(biāo)記中，type屬性值為radio時(shí)，可設(shè)置一個(gè)單選按鈕。單選按鈕的語(yǔ)法為上一頁(yè)下一頁(yè)返回11.3input元素<inputtype="radio"name="radioname"value="givenvalue"checked/>其中：(1)name屬性為單選按鈕指定一個(gè)名字，單選按鈕是在一組選擇中選一個(gè)。(2)value屬性用于設(shè)置單選按鈕的預(yù)設(shè)值。(3)checked屬性用于指定單選按鈕的初始狀態(tài)。當(dāng)checked缺省時(shí)，表明單選按鈕未被選擇當(dāng)設(shè)置checked時(shí)，表示被選擇，并且在瀏覽器中以實(shí)心圓顯示。11.3.4復(fù)選框checkbox復(fù)選框與單選按鈕的差異是復(fù)選框可在一組提供的選項(xiàng)中選擇多個(gè)甚上一頁(yè)下一頁(yè)返回11.3input元素至全部。復(fù)選框的語(yǔ)法為<inputtype="checkbox"name="checkboxname"value="givenvalue"checked>其中:(1)name為復(fù)選框指定一個(gè)名字，同一組中的復(fù)選框其name的值應(yīng)相同。(2)value屬性為復(fù)選框指定預(yù)設(shè)值，一旦復(fù)選框被選，向服務(wù)器提交數(shù)據(jù)時(shí)，value屬性的值即被傳送。(3)checked設(shè)置時(shí)表明復(fù)選框已被選擇。上一頁(yè)下一頁(yè)返回11.3input元素11.3.5上傳文件file文件上傳框?yàn)橛脩籼峁┝艘环N在線上傳文件的方式，用文件上傳控件時(shí)，在瀏覽器中會(huì)提供一個(gè)輸入文件名的文本框和一個(gè)瀏覽文件的按鈕，通過(guò)填寫(xiě)文件路徑或者直接選擇文件的方式，用戶可以將自己硬盤(pán)上的文件提交給服務(wù)器。其語(yǔ)法為<inputtype="file"name="filename"size="fieldsize"maxlength="maxmumfieldsize”>type指定了input標(biāo)記的類(lèi)型。其他屬性的作用與文本框中屬性的相同。上一頁(yè)下一頁(yè)返回11.3input元素11.3.6隱藏字段hidden將信息從表單傳送到后臺(tái)程序中時(shí)，編程者通常要發(fā)送一些不應(yīng)該被使用者看見(jiàn)的數(shù)據(jù)。這些數(shù)據(jù)有可能是后臺(tái)程序需要的一個(gè)用于設(shè)置表單收件人信息的變量，也可能是提交表單后后臺(tái)程序?qū)⒁ㄏ蛑劣脩舻囊粋€(gè)URL。要發(fā)送這類(lèi)不能讓表單使用者看到的信息，用戶必須使用一個(gè)隱藏表單對(duì)象—隱藏字段。其語(yǔ)法為:<inputtype="hidden"name="hiddenname"value="givenvalue">type指定了input標(biāo)記的類(lèi)型。其他屬性的作用與文本框中屬性的相同。上一頁(yè)下一頁(yè)返回11.3input元素11.3.7按鈕button、submit、reset1.普通按鈕:inputtype="button"當(dāng)<input>標(biāo)記中type屬性的值為“button”時(shí)，<input>標(biāo)記提供一個(gè)普通按鈕。單擊按鈕不會(huì)激活任何動(dòng)作。設(shè)置普通按鈕的目的是用腳本語(yǔ)言把事件與按鈕相關(guān)聯(lián)。當(dāng)單擊這種按鈕時(shí)，可以觸發(fā)某一事件，通過(guò)對(duì)事件的響應(yīng)可完成某種預(yù)設(shè)的功能。普通按鈕的語(yǔ)法為<inputtype="button"name="buttonname"value”text”onclick="script”>其中type指定了input標(biāo)記的類(lèi)型，value指定了按鈕上顯示的內(nèi)容。上一頁(yè)下一頁(yè)返回11.3input元素2.重置與提交按鈕在表單中，重置(reset)和提交(submit)按鈕具有重要的作用，當(dāng)表單中的數(shù)據(jù)需要重新填寫(xiě)或恢復(fù)到初始狀態(tài)時(shí)，可用重置按鈕;當(dāng)要將表單中的數(shù)據(jù)提交給服務(wù)器時(shí)，可用提交按鈕。其語(yǔ)法為:<inputtype="reset|submit”value="buttonvalue"name="buttonname">其中:(1)value屬性用于設(shè)置按鈕值，它顯示在按鈕上，表明了按鈕的含義。(2)當(dāng)type屬性的值為reset時(shí)，按鈕為重置按鈕，單擊按鈕時(shí)，可使與此按鈕在同一表單中的其他控件的值回到初始狀態(tài)。當(dāng)type屬性的上一頁(yè)下一頁(yè)返回11.3input元素值為submit時(shí)，按鈕的作用是向<form>標(biāo)記中action屬性值所指定的目標(biāo)地址提交數(shù)據(jù)。11.3.8使用圖像提交表單image當(dāng)<input>標(biāo)記的type屬性的值為image時(shí)表示圖像按鈕。它的功能與提交按鈕基本相同只不過(guò)在圖像按鈕用一幅圖像代替了按鈕。其語(yǔ)法為:<inputtype="image"name="imagename”src="URL"align=""/>其中:(1)name是圖像按鈕的名字。(2)src屬性指明圖像按鈕中顯示圖像的URL地址。(3)align是圖像按鈕中圖像的對(duì)齊方式。上一頁(yè)返回11.4列表與下拉菜單11.4.1select和optionHTML語(yǔ)言支持具有選擇功能的標(biāo)記<select>。選擇功能方便了用戶在多個(gè)選項(xiàng)中進(jìn)行選擇，提高了窗口區(qū)域的利用率。通過(guò)對(duì)<select>標(biāo)記的屬性size的值的設(shè)置，可產(chǎn)生不同形式的列表:如列表和下拉菜單。對(duì)屬性multiple進(jìn)行設(shè)置，可以同時(shí)選擇多個(gè)列表項(xiàng)。<select>標(biāo)記是定義一個(gè)列表結(jié)構(gòu)的標(biāo)記，列表中的列表項(xiàng)(或稱(chēng)菜單項(xiàng))是真正被選擇的對(duì)象，對(duì)它的定義要用<option>標(biāo)記。因此，設(shè)置一個(gè)列表，要同時(shí)使用<select>和<option>標(biāo)記。select標(biāo)記的語(yǔ)法為<selectclass=”classname”id=”idname”name=”selectname”size="number"multiple>下一頁(yè)返回11.4列表與下拉菜單<option>列表項(xiàng)信息</option></select>其中:(1)class、id、name、style屬性的含義與前面所介紹的標(biāo)記的屬i生含義相同。(2)size屬性用于設(shè)置顯示列表項(xiàng)的個(gè)數(shù)，缺省值為1，這時(shí)為下拉列表;當(dāng)size值大于1而小于列表項(xiàng)數(shù)時(shí)，列表是滾動(dòng)列表;當(dāng)size的值大于列表項(xiàng)數(shù)時(shí)，列表所有的項(xiàng)都被顯示，這時(shí)列表是一個(gè)菜單。(3)當(dāng)使用multiple屬性時(shí)，用戶可同時(shí)選擇多個(gè)列表項(xiàng)。(4)<select>標(biāo)記是一個(gè)容器標(biāo)記，它所包含的內(nèi)容為<option>標(biāo)記。在HTML文檔中使用列表，需要用<option>標(biāo)記來(lái)定義列表項(xiàng)。上一頁(yè)下一頁(yè)返回11.4列表與下拉菜單11.4.2optgroup在列表框中有的時(shí)候需要對(duì)選項(xiàng)分類(lèi)，比如圖11-15所示的下拉選項(xiàng)中有一部分是HTML的標(biāo)記的內(nèi)容，有一部分是CSS的標(biāo)記的內(nèi)容，所以希望這些選項(xiàng)能夠以分組的形式出現(xiàn)在下拉列表中。通過(guò)<optgroup>標(biāo)記可以對(duì)選項(xiàng)進(jìn)行分類(lèi)，并使用label屬性使其在下拉列表里顯示為一個(gè)不可選的縮進(jìn)標(biāo)題。其語(yǔ)法為:.<optgrouplabel=”組名”>“組名”代表分組選擇項(xiàng)的分類(lèi)名(此分類(lèi)名不能選擇)，以<optgroup>開(kāi)始，以</optgroup>結(jié)束。例如對(duì)圖11-15的下拉框增加分組功能。上一頁(yè)返回11.5文本域textareaHTML提供了多行文本的輸入框，這是接收大量數(shù)據(jù)的文本區(qū)域，它可以用于數(shù)據(jù)的輸入，又可用于數(shù)據(jù)的顯示。實(shí)現(xiàn)多行文本輸入?yún)^(qū)的標(biāo)記為<textarea>，其語(yǔ)法為:<textareaclass="classname”id=”IDname”cols="number”rows="number”style=”styleinformation"readonly>在文本區(qū)中顯示內(nèi)容</textarea>其中:(1)<textarea>標(biāo)記是一個(gè)容器標(biāo)記，可以包含內(nèi)容，若<textarea>和</textarea>中有內(nèi)容，則顯示在文本區(qū)中，如果此文本區(qū)是用于接收數(shù)據(jù)的，應(yīng)省去被標(biāo)記的內(nèi)容。(2)class,name,id和style屬性與前面所學(xué)習(xí)標(biāo)記的同名屬性具有相同的功能。下一頁(yè)返回11.5文本域textarea(3)rows屬性用來(lái)設(shè)置文本輸入窗口的高度，單位是字符行;cols屬性用來(lái)設(shè)置文本輸入窗口的寬度，單位是字符個(gè)數(shù)。通常多行文本區(qū)不能完全容納數(shù)據(jù)時(shí)，瀏覽器會(huì)自動(dòng)產(chǎn)生滾動(dòng)條。(4)readonly屬性將多行文本區(qū)設(shè)定為只讀，不能修改和編輯。上一頁(yè)返回11.6標(biāo)簽label為了使瀏覽者能更方便地選擇選項(xiàng)或定位輸入點(diǎn)，在網(wǎng)頁(yè)制作時(shí)應(yīng)該使瀏覽者能在單擊與某個(gè)控件相關(guān)的文本時(shí)，即選中該控件。例如，單擊復(fù)選框右邊的文本即可選中復(fù)選框，或者單擊文本框左邊的提示文本即可將插入點(diǎn)定位到該文本框。實(shí)現(xiàn)這種功能的方法是用label標(biāo)記符為表單控件指定標(biāo)簽，并使用<label>標(biāo)記的for屬性使其與表單控件關(guān)聯(lián)起來(lái)，將<<lable>標(biāo)記的for屬性設(shè)置為與該控件的id相同，將lable綁定到控件的name屬性是沒(méi)有作用的。其語(yǔ)法為:<labelfor=”fname">顯示內(nèi)容字符串</label>for表示<<lable>標(biāo)記要綁定的表單控件的id，點(diǎn)擊這個(gè)標(biāo)記的時(shí)候，所綁定的標(biāo)記將獲取焦點(diǎn)。下面的例子在有輸入框控件的表單中使用了<<label>標(biāo)記。返回11.7HTML5新增的元素屬性11.7.1form在HTML5中，可以把表單從屬元素寫(xiě)在頁(yè)面的任何地方，然后給元素指定一個(gè)form屬性，屬性值為表單的id，這樣就可以聲明該元素從屬于指定表單。11.7.2input在HTML5中，對(duì)input元素進(jìn)行了大幅度的改進(jìn)，使得我們可以簡(jiǎn)單地使用這些新增的元素來(lái)實(shí)現(xiàn)需要JavaScript來(lái)能實(shí)現(xiàn)的功能。(1)url類(lèi)型。input元素里的url類(lèi)型是一種專(zhuān)門(mén)用來(lái)輸入U(xiǎn)RL地址的文本框。如果該文本框中的內(nèi)容不是URL地址格式的文字，則不允許提交。(2)email類(lèi)型。下一頁(yè)返回11.7HTML5新增的元素屬性如果用戶在該文本框中輸入的不是email地址的話，則會(huì)提醒不允許提交，但值得注意的是:它并不檢查該email地址是否存在。如果另外加上required屬性的時(shí)候，該文本是可以為空的。另外email類(lèi)型的文本框有一個(gè)multiple屬性，它允許在該文本框中輸入一連串以逗號(hào)分開(kāi)的email地址。(3)date類(lèi)型。input元素里的，date類(lèi)型在開(kāi)發(fā)網(wǎng)頁(yè)的過(guò)程中是很常見(jiàn)的，例如我們經(jīng)?？吹降馁?gòu)買(mǎi)日期、發(fā)布時(shí)間、訂票時(shí)間等。這種，date類(lèi)型的時(shí)間是以日歷的形式來(lái)方便用戶輸入的。(4)time類(lèi)型。input里的time類(lèi)型是專(zhuān)門(mén)用來(lái)輸入時(shí)間的文本框，并且會(huì)在提交時(shí)上一頁(yè)下一頁(yè)返回11.7HTML5新增的元素屬性對(duì)輸入時(shí)間的有效性進(jìn)行檢查。它的外觀可能會(huì)根據(jù)不同類(lèi)型的瀏覽器而有不同表現(xiàn)形式。(5)datetime-local類(lèi)型。datetime-local類(lèi)型是一種專(zhuān)門(mén)用來(lái)輸入本地日期和時(shí)間的文本框，同樣，它在提交的時(shí)候也會(huì)對(duì)數(shù)據(jù)進(jìn)行檢查。(6)month類(lèi)型。顧名思義，month類(lèi)型是一種專(zhuān)門(mén)用來(lái)輸入月份的文本框，同樣提交時(shí)它也會(huì)對(duì)數(shù)據(jù)進(jìn)行檢查。(7)week類(lèi)型。week類(lèi)型是一種專(zhuān)門(mén)用來(lái)輸入周號(hào)的文本框，它也會(huì)在提交時(shí)對(duì)數(shù)據(jù)進(jìn)行檢查。上一頁(yè)下一頁(yè)返回11.7HTML5新增的元素屬性2.input屬性(1)formaction屬性。在HTML5中，可以給所有的提交按鈕增加不同的formaction屬性，點(diǎn)擊不同的按鈕，將不同的表單提交到不同的頁(yè)面。(2)formmethod屬性。在HTML5中，可以使用formaction屬性來(lái)對(duì)每個(gè)表單元素分別指定不同的提交頁(yè)面，同時(shí)也可以使用formmethod屬性來(lái)對(duì)每個(gè)表單元素分別指定不同的提交方法。(3)placeholder屬性。placeholder文本框處于未輸入狀態(tài)并且未獲得光標(biāo)焦點(diǎn)時(shí)，會(huì)顯示提示文字以指導(dǎo)用戶輸入，當(dāng)input元素獲得焦點(diǎn)時(shí)，這些提示文本上一頁(yè)下一頁(yè)返回11.7HTML5新增的元素屬性將會(huì)消失。