項目09網頁中表單元素的應用任務9-1網頁中表單的應用

知識點掌握表單的基本用法以及各種表單控件掌握html5自帶表單驗證功能掌握表單樣式的應用技能點能夠熟練制作表單能夠熟練使用各種表單控件能夠根據需要對表單進行樣式設計能夠根據需要使用表格進行頁面局部布局表單表單在網頁中主要負責數據采集功能。例如，搜索引擎頁面、用戶登錄頁面、用戶注冊頁面等使用的就是表單。當用戶填寫了相應信息后，這些信息就會經過表單服務器被提交到網站的后臺，后臺管理人員可以經過一系列操作拿到用戶輸入的信息來判斷是否允許用戶登錄或注冊。一、表單的組成一個完整的表單通常由表單域、表單控件（也稱為表單元素）、提示信息3個部分構成，具體解釋如下：1.表單域：相當于一個容器，用來容納所有的表單控件和提示信息。表單域可以定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。2.表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。3.提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。表單域表單控件提示信息二、創建表單HTML中規定，使用<form>標簽來表示表單，表單里的元素都需要放在<form></form>標簽中。<form>具體語法如下：

<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件和提示信息 </form><form>與</form>之間的內容是由用戶自定義的，action、method和name為表單標記<form>的常用屬性，另外在html5中還新增了autocomplete等屬性二、創建表單——action屬性在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務器程序的url地址。例如： <formaction="login.php">

表示當提交表單時，表單數據會傳送到當前路徑下的

"login.php"的頁面去處理。action的屬性值可以是相對路徑或絕對路徑，還可以為接收數據的E-mail郵箱地址。例如： <formaction=mailto:xxx@163.com>

表示當提交表單時，表單數據會以電子郵件的形式傳遞出去。當不設置action屬性，或者設置等于空字符串（即action=""）時，表單數據提交給當前頁面。二、創建表單——method屬性method屬性用于設置表單數據的提交方式，其取值為get或post。其中get為默認值，這種方式提交的數據將顯示在瀏覽器的地址欄中，保密性差，通過get提交數據，用戶名和密碼將明文出現在url上，且get方式提交的數據最多只能是1024字節。而post方式的保密性好，并且無數據量的限制，使用method="post"可以大量的提交數據。例如：<formaction=""method="get"name="loginform"> <!--文本框--> <inputname="username"> <!--提交按鈕--> <buttontype="submit"name="submit">提交</button></form>運行后在輸入框中輸入“張三”，提交表單后結果如下：二、創建表單——method屬性get方式提交的表單數據顯示在瀏覽器的地址欄中，表單數據添加到action所指向的URL后面，并且兩者使用“?”連接，而各個變量之間使用“&”連接。get保密性較差，因為在傳輸過程，數據被放在請求的URL中，而如今現有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中，然后放在某個地方，這樣就可能會有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數據，一些系統內部消息將會一同顯示在用戶面前，所以是不安全的。get主要用于從服務器上獲得數據，例如查詢，一般是用get方法遞交查詢條件，查詢結果在頁面上體現。二、創建表單——method屬性如果我們將method屬性的值換成“post”，提交表單后瀏覽器上出現如圖所示的錯誤信息。因為post是向服務器傳送數據的，我們在上面的代碼中沒有明確指出服務器處理該表單的文件，所以提示“無法傳送表單數據”，從這一點上看post和get是不同的，post將表單內各字段名稱與其內容放置在HTML表頭(header)內一起傳送給服務器端交由action屬性所指的程序處理，所有操作對用戶來說都是不可見的，保密性較好。出于安全性考慮，提交數據的時候最好使用post。二、創建表單——name屬性name屬性用于指定表單的名稱，以區分同一個頁面中的多個表單，為在腳本中引用表單提供方便。<formaction=""method="get"name="loginform"> <!--文本框--> <inputname="username"> <!--提交按鈕--> <buttontype="submit"name="submit">提交</button></form>二、創建表單——autocomplete屬性autocomplete屬性是HTML5中的新屬性，用于指定表單是否有自動完成功能。所謂“自動完成”是指將表單控件輸入的內容記錄下來，當再次輸入時，輸入的歷史記錄會顯示在一個下拉列表里，以實現自動完成輸入。autocomplete屬性有2個值，可以控制表單的自動完成功能是否開啟，具體如下：on：表單開啟自動完成功能；off：表單關閉自動完成功能。autocomplete=on三、表單控件表單控件用于定義不同的表單功能，如密碼輸入框、文本域、下拉列表、復選框等，最常見的表單控件是input控件。input控件的語法格式如下： <inputtype="控件類型"/><input/>標記為單標記，行內元素，但又與一般的行內元素不同，它不形成新的行塊，左右可以有其他元素，但是可以設定width和height，有內在尺寸。type屬性是<input>標記最基本的屬性，其取值有多種，用于指定不同的控件類型。3.1input控件及其屬性——type屬性常用的type屬性值如下text：默認值，單行文本輸入框password：密碼輸入框hidden：隱藏域，在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，為處理表單的程序服務radio：單選按鈕checkbox：復選框file：文件域button：普通按鈕submit：提交按鈕reset：重置按鈕image：圖像形式的提交按鈕文本框密碼框提交按鈕復選框文本框密碼框密碼框郵箱復選框提交和重置按鈕3.1input控件及其屬性——html5新增的type類型email：郵箱<inputtype="email">提供了默認的電子郵箱的完整驗證：要求必須包含@符號，同時必須包含服務器名稱，如果不能滿足驗證，則會阻止當前的數據提交。url：網址<inputtype="url">驗證只能輸入合法的網址：必須包含http://number：數字只能輸入數字（包含小數點），不能輸入其它的字符。可以有屬性max:最大值、min:最小值、value:默認值。

例如，數量：<inputtype="number"value="60"max="100"min="0">range：滑塊，可以通過刻度滑動來賦值例如<inputtype="range"max="100"min="0"value="50">其中max屬性設置滑塊控件的最大值，min屬性設置滑塊控件的最小值，value指定默認值。color：顏色<inputtype="color">生成一個顏色選擇器，用戶可以選擇顏色，可通過獲取此標簽的value值，獲取顏色信息。time/date/month/week：日期時間相關值3.1input控件及其屬性——html5新增的type類型對<input>標記定義type屬性就可以在前端頁面中按默認外觀顯示表單控件了，但是為了與服務器進行數據傳遞，除了type屬性之外，<input/>控件需要定義一些其他屬性，如name、value等。3.1input控件及其屬性——name屬性name屬性由用戶自定義，表示控件的名稱，每個表單控件都要用一個name屬性表示，這是因為web服務器根據表單控件的name屬性來判斷傳遞給服務器的值來自哪個控件。為了保證數據的準確采集，需要為每個表單控件定義一個獨一無二的名稱，但是同為一個組的單選框可以共用一個name。 <formaction=""name="loginform">

姓名：<inputname="username"> <inputtype="submit"name="sbtn"> </form>3.1input控件及其屬性——value屬性value屬性表示表單提交后該input控件上傳給服務器的數據。文本框的value屬性值表現為文本框中顯示的默認值；button普通按鈕、submit提交按鈕、reset重置按鈕的value屬性值則表現為按鈕上顯示的文本；而對于radio單選框、checkbox復選框來說，value屬性只是表單提交后上傳給服務器的數據。 <formaction=""name="loginform">

姓名：<inputname="username"value="張三"><br>

性別：<inputtype="radio"value="male"name="sex">男 <inputtype="radio"value="famale"name="sex">女 <br> <inputtype="submit"name="sbtn"value="登錄"> </form>注意在以上代碼中，單選按鈕的兩個選項使用了相同的name，表示它們屬于同一組數據，每一個選項選中后傳遞不同的值給服務器。3.1input控件及其屬性——其它重要屬性checked：設置單選框、復選框初始狀態首次加載時處于選中狀態。

例如：<inputtype="radio"value="famale"name="sex"checked="checked">女

或者直接寫成<inputtype="radio"value="famale"name="sex"checked>女

默認該選項被選中。disabled：設置首次加載使禁用此元素。當type為hidden時不能指定該屬性。

禁用時該控件顯示為灰色。readonly：指定該文本框內的值不允許用戶修改（可以使用Javascript腳本修改）。3.1input控件及其屬性——其它重要屬性placeholder：提供用戶填寫輸入字段的提示信息。該值僅用于提示，當該控件獲取焦點時提示信息自動消失，與value屬性值不同，value值是用戶實現定義好的該控件上傳給服務器的數據。如圖，兩個文本控件分別使用了placeholder和value屬性，二者在顯示上也是完全不同的。3.1input控件及其屬性——案例<formaction=""method="post">

用戶名：<inputtype="text"name="username"value="張三"readonly/><br/><br/>

密碼：

<inputtype="password"name="pw"placeholder="請輸入六位密碼"/>

<br/><br/>

性別：

<inputtype="radio"name="sex"value="boy"checked="checked"/>男 <inputtype="radio"name="sex"value="girl"/>女<br/><br/> 興趣：

<inputtype="checkbox"name="fv"value="sing"/>唱歌 <inputtype="checkbox"name="fv"value="dance"/>跳舞 <inputtype="checkbox"name="fv"value="swim"/>游泳<br/><br/>

上傳頭像： <inputtype="file"disabled/><br/><br/> <inputtype="submit"name="bt1"/> <inputtype="reset"name="bt2"/> <inputtype="button"name="bt3"value="普通按鈕"/> <inputtype="image"name="bt4"src="img/shopcar2.png"width="20"/> <inputtype="hidden"/></form>3.1input控件及其屬性——焦點轉移對于以上各種input控件，鼠標點擊控件會獲得焦點。為提供更好的用戶體驗，常常需要將<input/>控件聯合<label>標記使用，以擴大控件的選擇范圍。例如，在選擇性別時，我們希望單擊提示文字“男”或者“女”也可以選中相應的單選按鈕，在單擊提示文字“用戶名：”時，希望光標會自動移動到用戶名輸入框中。這時我們就需要使用<label>標記。<label>標簽為input元素定義標注（標記）。如果點擊label元素內內容，就會觸發相應控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。<label>標簽使用for屬性將<label>的標注內容綁定到指定id的表單控件上，for屬性要與相關元素的id屬性相同。3.1input控件及其屬性——焦點轉移<formaction=""method="post">

用戶名：

<labelfor="username">

<inputtype="text"name="uname"id="uname"/>

</label>

<br>

性別：

<labelfor="boy">

<inputtype="radio"name="sex"id="boy"value="boy"/>男

</label>

<labelfor="girl">

<inputtype="radio"name="sex"id="girl"value="girl"/>女

</label>

<br>

<labelfor="uname">

切換用戶

</label></form>三、表單控件——其他表單控件input元素是一個龐大和復雜的元素，但它并不是唯一的表單控件。除此之外，還有button、select、option、optgroup、textarea、fieldset、legend等傳統表單控件和datalist、progress、meter、output、keygen等新增表單控件。3.2其他表單控件——button控件<button>標簽也可以定義一個按鈕，雙標記，在button元素內部可以放置內容，比如文本或圖像。這是該元素與使用input元素創建的按鈕之間的不同之處。<button></button>控件與<inputtype="button">相比，功能更為強大，內容更為豐富。具體用法如下：<buttonname="名稱"type="按鈕類型"value="初始值">

按鈕文本、圖像或多媒體</button>type屬性用來指定按鈕類型，仍然分為以下三種：button普通按鈕submit提交按鈕reset復位重置按鈕value屬性用來設置按鈕的初始值，此值可被JavaScript腳本使用或修改。如果在HTML表單中使用button元素，不同的瀏覽器會提交不同的值。InternetExplorer將提交<button>與</button>之間的文本，而其他瀏覽器將提交value屬性的內容。3.2其他表單控件——textarea多行文本如果在表單頁面中需要用戶輸入大量文本，單行文本框就滿足不了需求了，通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：<textarea>文本內容</textarea>文本區域中可容納無限數量的文本，超過文本顯示區域會自動添加滾動條。可以通過cols和rows屬性來規定textarea的尺寸大小，例如：<textareacols="60"rows="8"></textarea>，但是更好的辦法是使用CSS的height和width樣式屬性。3.2其他表單控件——select下拉列表及分組使用select控件定義下拉菜單的基本語法格式如下：<select>

<option>選項1</option><option>選項2</option><option>選項3</option>...</select><formaction=""method="post">

<p>請選擇所在城市：</p>

<select>

<optionvalue="bj">北京</option>

<optionvalue="sh">上海</option>

<optionvalue="tj">天津</option>

<optionvalue="wh">武漢</option>

<optionvalue="jn">濟南</option>

</select>

<br>

<inputtype="submit"value="提交"/></form>3.2其他表單控件——select下拉列表及分組<select>和<option>標記也可以通過屬性設置來改變下拉菜單的外觀顯示效果。<select>的屬性size：指定下拉菜單的可見選項數（取值為正整數）。multiple：定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住Ctrl鍵的同時選擇多項。<option>的屬性selected：定義selected="selected"時，當前項即為默認選中項。<formaction=""method="post">

<p>請選擇所在城市：</p>

<selectname="city"size="5"multiple>

<optionvalue="bj">北京</option>

<optionvalue="sh"selected>上海</option>

。。。

</select>

<br>

<inputtype="submit"value="提交"/></form>滾動菜單效果3.2其他表單控件——select下拉列表及分組在實際網頁開發過程中，有時候由于選項過多，還需要對下拉菜單中的選項進行分組。方法是：在下拉菜單中使用<optgroup></optgroup>標記進行分組，并且使用label屬性規定每一組的名稱。<formaction=""method="post">

<p>請選擇所在區域：</p>

<select>

<option>--請選擇--</option>

<optgrouplabel="北京">

<option>東城區</option>

<option>西城區</option>

<option>朝陽區</option>

<option>海淀區</option>

</optgroup>

<optgrouplabel="天津">

<option>和平區</option>

<option>河東區</option>

<option>河西區</option>

</optgroup>

</select></form>3.2其他表單控件——fieldset表單分組當一個表單需要的字段內容較多時，需要合理的對內容進行分組，這樣整體看起來更加有組織性。表單分組可以使用<fieldset>和<legend>元素，二者都是雙標記，通過<fieldset>標記可將表單中一部分相關元素打包分組，重新設置CSS樣式使瀏覽器以特殊方式顯示這組表單字段。<legend>則是用來設置分組標題，它們本身不參與數據的交互操作。<formaction=""method="post">

<fieldsetid="st">

<legend>學生信息</legend>

<p>姓名：<inputtype="text"name="stuName"/></p>

<p>性別：<inputtype="radio"name="sex"value="male"/>男

<inputtype="radio"name="sex"value="female"/>女</p>

<p>年齡：<inputtype="number"name="stuAge"max="25"/></p>

</fieldset> <fieldsetid=“father">

。。。 </fieldset> <inputtype="submit"value="提交"/>

<inputtype="reset"value="重置"/></form>四、HTML5自帶表單驗證我們在使用表單時為了減輕后臺數據傳送壓力，提高數據傳送的質量和效率，往往需要在表單中的這些輸入數據被送往服務器前對其進行驗證。除了復雜的驗證需要使用js腳本完成，html5還新增了一些自帶的表單驗證功能，例如驗證輸入數據是否為空，輸入郵箱格式是否正確等。四、HTML5自帶表單驗證——input驗證在input標簽中可通過type屬性指定控件類型：email，指定輸入內容為電子郵件地址。url，指定輸入內容為URL。number，指定輸入內容為數字，并可通過min、max、step屬性指定最大最小及間隔。date、month、week、time、datetime、datetime-local指定輸入內容為相應日期相關類型。color，指定控件為顏色選擇器。如果沒有按照預訂格式進行輸入，在點擊提交按鈕的時候就會觸發錯誤的驗證信息。例：<inputid="u_email"name="u_email"type="email"/>四、HTML5自帶表單驗證——其它驗證非空驗證：在需要添加非空驗證的元素上添加required屬性可以進行非空驗證。例如：用戶名<inputtype="text"required>在點擊提交按鈕時，如果文本框中未能輸入數據，則觸發非空的提示信息。四、HTML5自帶表單驗證——其它驗證pattern正則驗證：規定pattern屬性指定輸入內容必須符合指定模式（正則表達式）。例：<inputid="phone_num"name="phone_num"type="text"pattern="\d{3}-\d{4}-\d{4}"placeholder="xxx-xxxx-xxxx"/>若輸入格式不符合正則表達式規定的格式，則給出相應錯誤提示。如果需要添加自定義提示，只需要添加title屬性即可。四、HTML5自帶表單驗證——novalidate屬性HTML5加強了表單驗證功能，可驗證表單控件是否可空及輸入內容的類型及格式是否合乎規定，還可通過為表單或控件設置novalidate屬性指定在提交表單時是否取消對表單或者某個控件進行有效的檢查。為表單設置該屬性時，可以關閉整個表單的驗證，這樣可以使form內的所有表單控件不被驗證。同樣，為指定的某個input控件設置該屬性時，則關閉該input控件的驗證。<formaction=""method="get"novalidate><inputtype="text"name="user_name"required/><inputtype="number"name="user_age"/><inputtype="submit"/></form>以上表單內的所有表單控件將不被驗證。五、表單樣式的應用——屬性選擇器的應用表單中需要大量地使用<input>標記，而且不同類型的input控件往往有不同的樣式，所以我們在定義CSS樣式表時經常要定位到具體的某個或者某幾個input元素，這種情況下使用以前學過的選擇器效率不高。屬性選擇器是根據元素的屬性和屬性值來匹配元素，在為不帶有class或id的表單設置樣式時特別有用。input[type="text"]{width:150px;display:block;}input[type="button"]{width:120px;margin-left:35px;display:block;}5.1屬性選擇器的應用——簡單屬性選擇器如果希望選擇有某個屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。例如把包含value屬性的所有元素變為紅色，可以寫作：*[value]{color:red;}把包含type屬性的input元素寬度都設成100px，可以寫作：input[type]{width:100px;}還可以根據多個屬性進行選擇。例如，要將同時有href和title屬性的HTML超鏈接的文本設置為紅色，可以這樣寫：a[href][title]{color:red;}5.1屬性選擇器的應用——根據具體屬性值選擇為了進一步縮小選擇范圍，可以只選擇有特定屬性值的元素。例如，input[type=text]{color:red;}這種方法要求屬性與屬性值必須完全匹配。5.1屬性選擇器的應用——根據部分屬性值選擇（了解）如果需要根據屬性值中的某個詞進行選擇，可以使用波浪號（~）。例如，input[name="~stu"]，可以選取name屬性值包含stu的input元素。除此之外，還有更多的子串匹配屬性選擇器，常用的見下表。類型描述[abc^="def"]選擇abc屬性值以"def"開頭的所有元素[abc$="def"]選擇abc屬性值以"def"結尾的所有元素[abc*="def"]選擇abc屬性值中包含子串"def"的所有元素5.2注冊登錄表單的設計一個好的web表單設計需要合理有層次的組織信息，設計清晰的瀏覽線，合理的標簽、提示文字及按鈕的排布，避免不必要的信息重復出現，降低用戶的視覺負擔。一般來說，要包括以下幾個部分：標簽：告訴用戶這里應該輸入的元素是什么，如：姓名、電話、地址；輸入域：可交互的輸入區域，如：文本框、選項框、下拉選擇、文件上傳；提示信息：提示信息是對標簽進行額外的信息描述，如：輸入信息的范例、填寫幫助；反饋：告知用戶當前操作可能或已出現的問題，如：錯誤提示、必填項提示等；動作按鈕：動作按鈕是在表單的結尾，如：提交、下一步、重置。標簽輸入域提示信息驗證反饋按鈕5.2注冊登錄表單的設計<body><divclass="container"><formaction="#">

<h3>用戶注冊</h3><span>用戶名</span><inputtype="text"name="username"required/><span>郵箱</span><inputtype="email"name="email"requiredplaceholder="xxx@"/><span>手機號</span><inputtype="tel"name="tel"><span>網址</span><inputtype="url"name="url"><span>所在城市</span><selectname="city"><optionvalue="0">北京</option><optionvalue="1">上海</option><optionvalue="2">杭州</option><optionvalue="3">濟南</option><optionvalue="4">深圳</option></select><inputtype="submit"/></form></div></body>5.2注冊登錄表單的設計<style>*{margin:0;padding:0;}.container{wi