第三章表單與元素

第三章表單與表單元素

本章目標(biāo)理解表單的作用理解表單與表單元素的關(guān)系掌握表單標(biāo)簽及其屬性掌握各種表單元素標(biāo)簽及其屬性表單瀏覽者經(jīng)常需要與Web服務(wù)器進行數(shù)據(jù)交互。當(dāng)瀏覽者需要填寫數(shù)據(jù)并將這些數(shù)據(jù)發(fā)送到服務(wù)器端時，需要在頁面中創(chuàng)建表單。<form></form>標(biāo)簽用于創(chuàng)建表單，它表示一組表單數(shù)據(jù)的容器。<form></form>標(biāo)簽在瀏覽器中并不具備可見的外觀，它只是作為數(shù)據(jù)的容器。<form> [瀏覽者在此填寫表單數(shù)據(jù)。]</form>表單元素文本框、密碼框、單選按鈕、復(fù)選框、文件域、隱藏域、提交按鈕、重置按鈕、自定義命令按鈕、圖像按鈕多行文本域列表框<input/>標(biāo)簽在表單中創(chuàng)建最常用的表單元素，如文本框，密碼框，單選按鈕，復(fù)選框，文件域，隱藏域，提交按鈕，重置按鈕，自定義命令按鈕，圖像按鈕等。由type屬性的值決定生成何種元素。<input/>標(biāo)簽的type屬性type屬性意義text文本框，type屬性的默認(rèn)值。password密碼框。瀏覽器將顯示明文顯示成為密碼字符。radio單選按鈕，應(yīng)成組地使用，一組中包含多個相關(guān)的單選按鈕。checkbox復(fù)選框?？蓡为毩⑹褂?，也可成組使用。file文件域，用于讓瀏覽者選擇本機的文件并上傳到服務(wù)器端。hidden隱藏域，用于在表單內(nèi)隱含一個預(yù)設(shè)的數(shù)據(jù)，相當(dāng)于一個瀏覽者看不到的文本框。submit提交按鈕，用于表單填寫完成時，將此表單的所有數(shù)據(jù)發(fā)送到服務(wù)器端。reset重置按鈕，用于將表單中所有表單元素的數(shù)據(jù)恢復(fù)到初始狀態(tài)。button自定義命令按鈕，沒有任何內(nèi)置行為?？墒褂媚_本來定義其行為。image圖像按鈕。功能與submit相同，但顯示為圖像。<input/>標(biāo)簽的屬性屬性意義type表單元素的類型，默認(rèn)值為textid標(biāo)簽在整個頁面中的唯一標(biāo)識符。name表單元素的名稱，只有設(shè)置了name屬性的表單元素才能參與表單提交。value表單元素的值，即它表示的數(shù)據(jù)。size一般用于文本框和密碼框，表示它們的寬度，以字符數(shù)度量。maxlength一般用于文本框和密碼框，表示它們可以接受的最多字符數(shù)。checked只用于單選按鈕和復(fù)選框，用于設(shè)置它們在初始狀態(tài)下被選中。src只用于圖像按鈕，設(shè)置圖像文件的地址。alt只用于圖像按鈕，設(shè)置圖像的替代文字。accept只用于文件域，設(shè)置文件域可接受的文件類型。disabled禁用表單元素，使它無法被瀏覽者操作且不參與表單提交。readonly使表單元素的數(shù)據(jù)無法被瀏覽者更改。文本框示例會員名:<inputid="txtName"type="text"name="txtName"value="請輸入會員名"size="20"/>密碼框示例登錄密碼:<inputid="txtPwd"type="password"name="txtPwd"maxlength="18"/>單選按鈕示例性別: <inputid="radioGenderMale"type="radio"name="radioGender"value="male"checked="checked"/>男

<inputid="radioGenderFemale"type="radio"name="radioGender"value="female"/>女復(fù)選框示例婚姻狀況:<inputid="chkMarried"type="checkbox"name="chkMarried"value="true"/>已婚<br/>興趣愛好: <inputid="chkTravel"type="checkbox"name="chkHobbies"value="travel"checked="checked">旅行

<inputid="chkGame"type="checkbox"name="chkHobbies"value="game">游戲

<inputid="chkShopping"type="checkbox"name="chkHobbies"value="shopping"checked="checked">購物

<inputid="chkChat"type="checkbox"name="chkHobbies"value="chat">聊天

<inputid="chkBar"type="checkbox"name="chkHobbies"value="bar"checked="checked">泡吧文件域示例相片:<inputid="filePhoto"type="file"name="filePhoto"/>

按鈕示例<inputid="btnSubmit"type="submit"name="btnSubmit"value="確認(rèn)注冊"/><inputid="btnReset"type="reset"name="btnReset"value="重新填寫"/><textarea></textarea>標(biāo)簽創(chuàng)建多行文本框，允許用戶輸入大段文本。<form>

簡介:<textarea>在此填寫你最近兩年來的工作經(jīng)歷。</textarea></form><textarea></textarea>標(biāo)簽的屬性屬性意義id標(biāo)簽在整個頁面中的唯一標(biāo)識符。name多行文本域的名稱，只有設(shè)置了name屬性的多行文本域才能參與表單提交。disabled禁用多行文本域，使它無法被瀏覽者操作。被禁用的多行文本域不參與表單提交。readonly使多行文本域的數(shù)據(jù)無法被瀏覽者更改。cols設(shè)置多行文本域的寬度，以每行中可容納的字符數(shù)度量。rows設(shè)置多行文本域的高度，以可見的行數(shù)度量。wrap設(shè)置多行文本域的自動換行模式。有三個值：off:不自動換行。文本區(qū)只有一行文本，除非瀏覽者回車強制換行。virtual:虛擬換行。一行文本的寬度即將超出多行文本框?qū)挾葧r自動換行，但在自動換行處不產(chǎn)生任何標(biāo)志。physical:物理換行。一行文本的寬度即將超出多行文本框?qū)挾葧r自動換行，且在自動換行處產(chǎn)生換行標(biāo)志。多行文本域示例簡介:<textareaname="txtDescription"cols="50"rows="6"wrap="virtual">在此填寫你最近兩年來的工作經(jīng)歷。</textarea><select></select>及<option></option>標(biāo)簽創(chuàng)建列表框及它的選項，以實現(xiàn)瀏覽者在多項相關(guān)的數(shù)據(jù)中選擇。年齡: <select> <option>--請選擇--</option> <option>18歲</option> <option>19歲</option> <option>20歲</option> <option>21歲</option> <option>22歲</option> <option>23歲</option> </select><option></option>標(biāo)簽的屬性屬性意義value選項表示的數(shù)據(jù)。如果表單提交時，這個選項是處于被選中的狀態(tài)，則整個列表框?qū)⑾蚍?wù)器發(fā)送這個選項的value值。selected設(shè)定選項在初始狀態(tài)下默認(rèn)被選中。年齡: <select> <optionvalue="">--請選擇--</option> <optionvalue="18">18歲</option> <optionvalue="19">19歲</option> <optionvalue="20">20歲</option> <optionvalue="21"selected="selected">21歲</option> <optionvalue="22">22歲</option> <optionvalue="23">23歲</option> </select><select></select>標(biāo)簽的屬性屬性意義id標(biāo)簽在頁面內(nèi)的唯一標(biāo)簽符。name列表框的名稱。必須設(shè)置此屬性才能參與表單提交。disabled禁用此列表框。size設(shè)置列表框中的選項顯示幾項。未設(shè)置此屬性時，列表框為下拉形式，設(shè)置此屬性后，列表框?qū)⒄归_為列表形式。multiple設(shè)置列表框的選項可被瀏覽者多選。列表框示例您感興趣的職位：<selectname="sltJobs"size="4"multiple="multiple"> <optionvalue=".NET">.NET軟件工程師</option> <optionvalue="C++">C++工程師</option> <optionvalue="JAVA">JAVA工程師</option> <optionvalue="WebUI"selected="selected">Web前端工程師</option> <optionvalue="DB">數(shù)據(jù)庫工程師</option> <optionvalue="JAVAWeb">JAVAWeb程序員</option> <optionvalue=""selected="selected">程序員</option> <optionvalue="TEST">軟件測試工程師</option></select><button></button>標(biāo)簽創(chuàng)建各種按鈕?？梢詫⑽谋净驁D像等其他各種內(nèi)容放置在<button></button>標(biāo)簽之內(nèi)。<button></button>標(biāo)簽的屬性屬性意義id標(biāo)簽在頁面內(nèi)的唯一標(biāo)識符。name按鈕的名稱。value表單提交時，此按鈕要發(fā)送的數(shù)據(jù)。注意：此屬性對IE瀏覽器無效，表單提交時，IE瀏覽器會將<button></button>標(biāo)簽之間的文本作為此按鈕的數(shù)據(jù)發(fā)送給服務(wù)器。disabled禁用此按鈕。type類型，有三個值：submit,reset,button。注意：此屬性的默認(rèn)值在不同的瀏覽器之間有差別，所以應(yīng)顯式地為此屬性賦值。Button按鈕示例<buttonname=”btnSubmit”value=”提交”type=”submit”>提交</button> <buttonname=”btnReset”type=”reset”>重置</button><buttonname=”btnClose”type=”button”>關(guān)閉窗口</button><label></label>標(biāo)簽為表單元素提供提示性的說明文字?？捎糜谂c某個表單元素進行綁定，這樣可以在這個標(biāo)簽在瀏覽者選擇時，瀏覽器自動將焦點轉(zhuǎn)移到與它綁定的表單元素中。與表單元素顯式綁定<label>的for屬性值指定為要綁定的表單元素的id屬性值。性別:<inputid="radioGenderMale"type="radio"name="radioGender"value="male"checked="checked"/><labelfor="radioGenderMale">男</label><inputid="radioGenderFemale"type="radio"name="radioGender"value="female"/><labelfor="radioGenderFemale">女</label><br/>婚姻狀況:<inputid="chkMarried"type="checkbox"name="chkMarried"value="true"/><labelfor="chkMarried">已婚</label><br/>與表單元素隱式綁定要綁定的表單元素放置在<label></label>的標(biāo)簽內(nèi)部。興趣愛好:<label><inputid="chkTravel"type="checkbox"name="chkHobbies"value="travel"checked="checked">旅行</label><label><inputid="chkGame"type="checkbox"name="chkHobbies"value="game">游戲<label><inputid="chkShopping"type="checkbox"name="chkHobbies"value="shopping"checked="checked">購物</label><label><inputid="chkChat"type="checkbox"name="chkHobbies"value="chat">聊天</label><label><inputid="chkBar"type="checkbox"name="chkHobbies"value="bar"checked="checked">泡吧</label><br/><fieldset></fieldset>及<legend></legend>標(biāo)簽用于將表單內(nèi)的多個表單元素分成多個組，并為每個組提供一個標(biāo)題。<form> <fieldset> <legend>帳戶信息</legend>

會員名、登錄密碼等一組表單元素 </fieldset> <fieldset> <legend>個人資料</legend>

性別、婚姻狀況、興趣愛好、相片、年齡、簡介等一組表單元素 </fieldset>

提交和重置按鈕</form>表單的屬性與提交表單提交是指瀏覽器將表單內(nèi)所有表單元素的數(shù)據(jù)作為整體發(fā)送到服務(wù)器器。瀏覽者可以通過類型為sumit或image的<input/>標(biāo)簽以及類型為submit的<button></button>標(biāo)簽的點擊來告知瀏覽器行使提交動作。<form></form>標(biāo)簽的屬性屬性意義id標(biāo)簽在頁面中的唯一標(biāo)識符。name表單的名稱。action動作，一個URL地址。即瀏覽器向服務(wù)器端的哪個程序提交表單數(shù)據(jù)。method方法，可以get或post,即瀏覽器采用哪種方法向服務(wù)器傳遞數(shù)據(jù)。默認(rèn)為getenctype表單數(shù)據(jù)在傳遞之前瀏覽器對其編碼的方式。當(dāng)表單內(nèi)包含file類型的<input/>表單元素用于上傳文件時，此屬性必須設(shè)置為multipart/form-data。表單的action屬性<formname="frmLogin"action="login.html"method="post">

會員名:<inputtype="text"name="txtName"/><br/>

密碼:<inputtype="password"name="txtPwd"/><br/> <inputtype="submit"name="btnSubmit"value="登錄"/> <inputtype="reset"name