4項目四 表單的應(yīng)用

HTML5+CSS3網(wǎng)頁設(shè)計與布局項目四表單的應(yīng)用4.1表單的應(yīng)用4.2在表單中添加元素4.3HTML5新增表單輸入類型4.1

表單的應(yīng)用4.1表單的應(yīng)用

在HTML文檔中，表單多數(shù)用于注冊頁面，表單用來接收用戶輸入的信息，當(dāng)用戶提交表單時，瀏覽器將用戶在表單中輸入的數(shù)據(jù)打包，并發(fā)送給服務(wù)器，從而實現(xiàn)用戶與web服務(wù)器的交互。

添加表單語法的代碼：

<formname="表單名"method="傳送方示"action="表單處理程序">

表單內(nèi)代碼……</form>4.2在表單中添加元素4.2.1文本字段和密碼域4.2.2單選按鈕4.2.3復(fù)選框4.2.4普通按鈕4.2.5提交按鈕4.2.10文本域4.2.9菜單列表類表單元素4.2.8文件域4.2.7隱藏域4.2.6重置按鈕4.2在表單中添加元素

在html中，<form>標(biāo)簽是使用來創(chuàng)建供用戶輸入的html表單。<form>標(biāo)簽中通常會有很多子元素，用來定義各種交互控件（文本字段、復(fù)選框、單選框、提交按鈕等等），比如<input>、<button>、<select>、<textarea>等標(biāo)簽。

input語法的代碼：

<form……> <inputname="控件名稱"type="控件類型"> </form>4.2.1文本字段和密碼域

文本字段（text）和密碼域（password）用于創(chuàng)建單行文本輸入框，供訪問者輸入單行文本信息。

添加文本字段和密碼域的代碼：

<p>用戶名：<inputtype="text"name="username"size="15"value="請輸入用戶名"></p> <p>密碼：<inputtype="password"name="password"size="15"maxlength="6"></p>4.2.2單選按鈕Radio元素用于創(chuàng)建單選按鈕，單選按鈕中的每個單選按鈕需要使用相同的名稱，用戶一次只能選擇一個選項。單選按鈕還需要使用value值，選定的單選按鈕在提交時生成對應(yīng)的name/vale值。

添加單選按鈕的代碼： <p>性別： <inputtype="radio"name="sex"value="male"checked>男 <inputtype="radio"name="sex"value="female">女 </p>4.2.3復(fù)選框checkbox元素用于創(chuàng)建復(fù)選框。復(fù)選框允許用戶在有限數(shù)量的選項中選擇零個或多個選項。選定的多選按鈕在提交時生成對應(yīng)的name/value值。

增加復(fù)選框的代碼： <p> <inputtype="checkbox"name="test"value="book"checked>看書

<inputtype="checkbox"name="test"value="spot">運動

<inputtype="checkbox"name="test"value="sing">唱歌

<inputtype="checkbox"name="test"value="game">游戲

</p>4.2.4普通按鈕button元素是普通按鈕，普通按鈕在正常情況下點擊是沒有效果的，需要給按鈕單獨設(shè)置方法后點擊才能生效。

增加普通按鈕的代碼： <p><inputtype="button"name="b1"value="這是點擊無效按鈕"></p>4.2.5提交按鈕submit元素用于創(chuàng)建提交按鈕。當(dāng)用戶點擊提交按鈕時，表單的內(nèi)容就會提交至指定的位置。當(dāng)value值沒有設(shè)置時，提交按鈕的默認(rèn)字樣為提交。

增加提交按鈕的代碼：

<p><inputtype="submit"name="button2"value="提交表單"></p>4.2.6重置按鈕reset元素用于創(chuàng)建重置按鈕。當(dāng)用戶單擊此按鈕時，此重置按鈕所在表單中的所有元素的值被重置為其value屬性中指定的初始值。當(dāng)value值沒有設(shè)置時，提交按鈕的默認(rèn)字樣為重置。

增加重置按鈕的代碼： <inputtype="reset"name="b3"value="重新填寫">4.2.7隱藏域

表單中的隱藏域主要用來傳遞一些參數(shù)，而這些參數(shù)不需要在頁面中顯示。當(dāng)瀏覽者提交表單時，隱藏域的內(nèi)容會被一起提交給處理程序。

增加隱藏域的代碼： <inputtype="hidden"name="page_id"value="example">4.2.8文件域

在上傳文件時常常會用到文件域，它用于查找硬盤中的文件路徑，然后通過表單將選中的文件上傳。在設(shè)置電子郵件的附件、上傳頭像、發(fā)送文件時，常常會看到這個控件。

增加文件域的代碼：

<p>請上傳你的頭像：<inputtype="file"name="picture"></p>4.2.9菜單列表類表單元素select元素用于顯示下拉列表。每個選項由一個option元素表示，select必須包含至少一個option元素。用戶所選擇的選項將高亮顯示塊表示。

添加菜單列表類的代碼： <p>請選擇你的學(xué)歷 <selectname="cardtype"> <optionvalue="university">大學(xué)</option> <optionvalue="high">高中</option> <optionvalue="middle">初中</option> <optionvalue="small">小學(xué)</option> <optionvalue="other">其他</option> </select> </p>4.2.10文本域textarea元素?于創(chuàng)建多??本輸?控件。此元素使?結(jié)束標(biāo)記</textarea>結(jié)束，在<textarea>和</textarea>之間的內(nèi)容是該多??本框的初始值。

添加文本域的代碼：

<p>

您對我們的建議： <textareaname="info"cols="35"rows="7">請將意見輸入此區(qū)域 </textarea> <p>4.3HTML5新增表單輸入類型4.3.1email類型4.3.2number類型4.3.3range類型4.3.4url類型4.3.1email類型

當(dāng)input的type屬性設(shè)置為email，在提交表單時，會自動驗證email域的值是否符合email的標(biāo)準(zhǔn)格示，再也不用自己用正則表達示去寫email的格示驗證了。

添加email類的代碼：

<p>請輸入你的郵箱：<inputtype="email"name="useremail"/></p>4.3.2number類型

當(dāng)input的type屬性設(shè)置為number時，會自動檢驗輸入內(nèi)容是否為數(shù)字類型，您還能夠設(shè)定該輸入框數(shù)字的限定。

添加number類的代碼：

<p>請輸入你的電話:<inputtype="number"name="phone"min="11"max="11"/></p>4.3.3range類型range類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型顯示為滑動條。您還能夠設(shè)定對所接受的數(shù)字的限定。

添加range類的代碼：

<inputtype="range"name="user_range"min="5"max="