第三章表單與表單元素

本章目標理解表單的作用理解表單與表單元素的關系掌握表單標簽及其屬性掌握各種表單元素標簽及其屬性表單瀏覽者經常需要與Web服務器進行數據交互。當瀏覽者需要填寫數據并將這些數據發送到服務器端時，需要在頁面中創建表單。<form></form>標簽用于創建表單，它表示一組表單數據的容器。<form></form>標簽在瀏覽器中并不具備可見的外觀，它只是作為數據的容器。<form> [瀏覽者在此填寫表單數據。]</form>表單元素文本框、密碼框、單選按鈕、復選框、文件域、隱藏域、提交按鈕、重置按鈕、自定義命令按鈕、圖像按鈕多行文本域列表框<input/>標簽在表單中創建最常用的表單元素，如文本框，密碼框，單選按鈕，復選框，文件域，隱藏域，提交按鈕，重置按鈕，自定義命令按鈕，圖像按鈕等。由type屬性的值決定生成何種元素。<input/>標簽的type屬性type屬性意義text文本框，type屬性的默認值。password密碼框。瀏覽器將顯示明文顯示成為密碼字符。radio單選按鈕，應成組地使用，一組中包含多個相關的單選按鈕。checkbox復選框。可單獨立使用，也可成組使用。file文件域，用于讓瀏覽者選擇本機的文件并上傳到服務器端。hidden隱藏域，用于在表單內隱含一個預設的數據，相當于一個瀏覽者看不到的文本框。submit提交按鈕，用于表單填寫完成時，將此表單的所有數據發送到服務器端。reset重置按鈕，用于將表單中所有表單元素的數據恢復到初始狀態。button自定義命令按鈕，沒有任何內置行為。可使用腳本來定義其行為。image圖像按鈕。功能與submit相同，但顯示為圖像。<input/>標簽的屬性屬性意義type表單元素的類型，默認值為textid標簽在整個頁面中的唯一標識符。name表單元素的名稱，只有設置了name屬性的表單元素才能參與表單提交。value表單元素的值，即它表示的數據。size一般用于文本框和密碼框，表示它們的寬度，以字符數度量。maxlength一般用于文本框和密碼框，表示它們可以接受的最多字符數。checked只用于單選按鈕和復選框，用于設置它們在初始狀態下被選中。src只用于圖像按鈕，設置圖像文件的地址。alt只用于圖像按鈕，設置圖像的替代文字。accept只用于文件域，設置文件域可接受的文件類型。disabled禁用表單元素，使它無法被瀏覽者操作且不參與表單提交。readonly使表單元素的數據無法被瀏覽者更改。文本框示例會員名:<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"/>女復選框示例婚姻狀況:<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="確認注冊"/><inputid="btnReset"type="reset"name="btnReset"value="重新填寫"/><textarea></textarea>標簽創建多行文本框，允許用戶輸入大段文本。<form>

簡介:<textarea>在此填寫你最近兩年來的工作經歷。</textarea></form><textarea></textarea>標簽的屬性屬性意義id標簽在整個頁面中的唯一標識符。name多行文本域的名稱，只有設置了name屬性的多行文本域才能參與表單提交。disabled禁用多行文本域，使它無法被瀏覽者操作。被禁用的多行文本域不參與表單提交。readonly使多行文本域的數據無法被瀏覽者更改。cols設置多行文本域的寬度，以每行中可容納的字符數度量。rows設置多行文本域的高度，以可見的行數度量。wrap設置多行文本域的自動換行模式。有三個值：off:不自動換行。文本區只有一行文本，除非瀏覽者回車強制換行。virtual:虛擬換行。一行文本的寬度即將超出多行文本框寬度時自動換行，但在自動換行處不產生任何標志。physical:物理換行。一行文本的寬度即將超出多行文本框寬度時自動換行，且在自動換行處產生換行標志。多行文本域示例簡介:<textareaname="txtDescription"cols="50"rows="6"wrap="virtual">在此填寫你最近兩年來的工作經歷。</textarea><select></select>及<option></option>標簽創建列表框及它的選項，以實現瀏覽者在多項相關的數據中選擇。年齡: <select> <option>--請選擇--</option> <option>18歲</option> <option>19歲</option> <option>20歲</option> <option>21歲</option> <option>22歲</option> <option>23歲</option> </select><option></option>標簽的屬性屬性意義value選項表示的數據。如果表單提交時，這個選項是處于被選中的狀態，則整個列表框將向服務器發送這個選項的value值。selected設定選項在初始狀態下默認被選中。年齡: <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>標簽的屬性屬性意義id標簽在頁面內的唯一標簽符。name列表框的名稱。必須設置此屬性才能參與表單提交。disabled禁用此列表框。size設置列表框中的選項顯示幾項。未設置此屬性時，列表框為下拉形式，設置此屬性后，列表框將展開為列表形式。multiple設置列表框的選項可被瀏覽者多選。列表框示例您感興趣的職位：<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">數據庫工程師</option> <optionvalue="JAVAWeb">JAVAWeb程序員</option> <optionvalue=""selected="selected">程序員</option> <optionvalue="TEST">軟件測試工程師</option></select><button></button>標簽創建各種按鈕。可以將文本或圖像等其他各種內容放置在<button></button>標簽之內。<button></button>標簽的屬性屬性意義id標簽在頁面內的唯一標識符。name按鈕的名稱。value表單提交時，此按鈕要發送的數據。注意：此屬性對IE瀏覽器無效，表單提交時，IE瀏覽器會將<button></button>標簽之間的文本作為此按鈕的數據發送給服務器。disabled禁用此按鈕。type類型，有三個值：submit,reset,button。注意：此屬性的默認值在不同的瀏覽器之間有差別，所以應顯式地為此屬性賦值。Button按鈕示例<buttonname=”btnSubmit”value=”提交”type=”submit”>提交</button> <buttonname=”btnReset”type=”reset”>重置</button><buttonname=”btnClose”type=”button”>關閉窗口</button><label></label>標簽為表單元素提供提示性的說明文字。可用于與某個表單元素進行綁定，這樣可以在這個標簽在瀏覽者選擇時，瀏覽器自動將焦點轉移到與它綁定的表單元素中。與表單元素顯式綁定<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>的標簽內部。興趣愛好:<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>標簽用于將表單內的多個表單元素分成多個組，并為每個組提供一個標題。<form> <fieldset> <legend>帳戶信息</legend>

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

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

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