Web前端開發(fā)技術(shù)第四單元表單的應(yīng)用掌握表單的概念及標(biāo)記掌握表單控件，如信息輸入<input>等的使用掌握表單標(biāo)記和控件標(biāo)記的屬性設(shè)置多表單的使用表單控件的使用4.1表單標(biāo)記4.2表單控件4.3HTML5表單數(shù)據(jù)內(nèi)容變化

表單標(biāo)記14.1表單標(biāo)記表單的概念：

表單是網(wǎng)頁中提供的一種交互式操作手段，在網(wǎng)頁中的使用十分廣泛。無論是提交搜索信息，還是網(wǎng)上注冊/登錄等應(yīng)用都需要使用表單。基本語法：4.1表單標(biāo)記語法說明：action屬性用于提交表單數(shù)據(jù)的目的地址。method屬性設(shè)置表單數(shù)據(jù)發(fā)送方式，有兩種發(fā)送方式分別為GET方式和POST方式，默認(rèn)表單發(fā)送方式為GET方式。enctype屬性設(shè)置提交數(shù)據(jù)的編碼方式，可選屬性值如下表：表單控件24.2.1添加表單文本框添加單行輸入的文本框，將type屬性取值為“text”。基本語法：語法說明：

type的屬性值設(shè)置為“text”；name屬性定義該控件的名稱，類似于設(shè)置了變量名；value屬性中的值為文本框中輸入的值，可預(yù)先進行設(shè)置，也可不設(shè)置，類似設(shè)置變量值的概念。當(dāng)表單提交之后發(fā)送數(shù)據(jù)時，會以“名稱=值”這樣的值對方式發(fā)送出去。4.2.2添加密碼域基本說明：語法說明：type的屬性值設(shè)置為“password”；其他屬性與單行文本框一致，一般name屬性都會進行設(shè)置，在此不再贅述。基本說明：語法說明：

type的屬性值設(shè)置為“radio”；設(shè)置checked屬性表示單選按鈕設(shè)置為選中狀態(tài)，不設(shè)置則表示非選中狀態(tài)。其他屬性與文本框一致，在此不再贅述。4.2.3添加單選按鈕基本說明：語法說明：type的屬性值設(shè)置為“checkbox”；設(shè)置checked屬性表示單選按鈕設(shè)置為選中狀態(tài)，不設(shè)置則表示非選中狀態(tài)。其他屬性與文本框一致，在此不再贅述。4.2.4添加復(fù)選框基本說明：語法說明：

type的屬性值設(shè)置為“button”；value屬性設(shè)置按鈕在網(wǎng)頁上顯示的文本，未設(shè)置時瀏覽器會設(shè)置默認(rèn)值。標(biāo)準(zhǔn)按鈕大多數(shù)與JavaScript的事件相結(jié)合來啟動腳本。4.2.5添加標(biāo)準(zhǔn)按鈕基本說明：語法說明：

type的屬性值設(shè)置為“submit”；value屬性用于設(shè)置按鈕在網(wǎng)頁上顯示的文本，未設(shè)置時瀏覽器會設(shè)置默認(rèn)值。它與標(biāo)準(zhǔn)按鈕的區(qū)別是當(dāng)點擊提交按鈕會自動提交表單，但標(biāo)準(zhǔn)按鈕什么都不會發(fā)生。4.2.6添加提交按鈕基本說明：語法說明：type的屬性值設(shè)置為“reset”；其他屬性設(shè)置可參照4.2.5節(jié)中標(biāo)準(zhǔn)按鈕的說明。4.2.7添加重置按鈕基本說明：語法說明：

type的屬性值設(shè)置為“image”；src屬性為必要屬性，用于指定圖片源的地址；alt屬性它為圖像輸入規(guī)定替代文本，為用戶由于某些原因無法查看圖像時提供了備選的信息；width屬性設(shè)置圖片的寬度。height屬性設(shè)置圖片的高度；border屬性設(shè)置圖片的邊框。4.2.8添加圖片域

在表單中插入隱藏域，它不會顯示在網(wǎng)頁上，對用戶來說是不可見的，它常會存儲一個默認(rèn)值，該值也可以由JavaScript進行修改?；菊f明：語法說明：

type的屬性值設(shè)置為“hidden”。4.2.9添加隱藏域

在網(wǎng)頁上文件域用于瀏覽并上傳本地文件。基本說明：語法說明：type的屬性值設(shè)置為“file”；form標(biāo)記中需要設(shè)置“enctype=multipart/form-data”，否則無法提交數(shù)據(jù)。4.2.10添加文件域基本說明：語法說明：

<select></select>插入下拉列表，<option></option>插入列表項。

其中，<select>標(biāo)記中的multiple屬性規(guī)定可同時選擇多個選項；size屬性規(guī)定下拉列表中可見選項的數(shù)目；name屬性定義該控件的名稱。<option>標(biāo)記中的value屬性定義與選項相關(guān)聯(lián)的值。4.2.11添加下拉列表

在表單中插入文字域，可用于編輯多行文本，使用<textarea></textarea>文字域標(biāo)記?；菊f明：語法說明：rows屬性設(shè)置文本區(qū)內(nèi)的可見行數(shù)；cols屬性設(shè)置文本區(qū)內(nèi)的可見寬度；rows和cols屬性來規(guī)定textarea的尺寸；wrap屬性文本區(qū)的換行模式，屬性值如下表。4.2.12文本域標(biāo)記

<label>標(biāo)記為input元素定義標(biāo)注的標(biāo)記，該標(biāo)記不會向用戶呈現(xiàn)任何特殊效果，不過，它為鼠標(biāo)用戶改進了可用性。表現(xiàn)為在label元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)記時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)記相關(guān)的表單控件上?；菊f明：語法說明：<label>標(biāo)記為雙標(biāo)記。該標(biāo)記的for屬性可把label綁定到另外一個元素（把"for"屬性的值設(shè)置為相關(guān)元素的id屬性的值），<label>標(biāo)記的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同。4.2.13標(biāo)記標(biāo)簽

HTML5表單數(shù)據(jù)內(nèi)容變化3

HTML5新增了一種數(shù)據(jù)提交格式enctype=“multipart/form-data”，允許form的內(nèi)容將會以XML的形式提交。這意味著數(shù)據(jù)的提交從單純的線性字符串走向結(jié)構(gòu)性的對象數(shù)據(jù)。基本說明：

服務(wù)器將接收到類似JSON這樣的XML格式的表單數(shù)據(jù)。客戶端傳來的數(shù)據(jù)要用到多媒體傳輸協(xié)議，所以表單提交方式必須是post方式。4.3.1HTML5數(shù)據(jù)提交格式

在之前講到的表單控件必須要放在<form></form>這對標(biāo)記中，但在HTML5的標(biāo)準(zhǔn)下對form標(biāo)記有了新的規(guī)范和約束，使得表單可以定向索引，提交方式也更加靈活。基本說明：

以上代碼片段可以看出HTML5標(biāo)準(zhǔn)下可以使控件游離在form標(biāo)記外，有助于用戶不拘泥于頁面的結(jié)構(gòu)，可以在頁面任意位置將數(shù)據(jù)提交出去。具體實現(xiàn)是基于input元素中form屬性與form標(biāo)記的id屬性相綁定。4.3.2HTML5數(shù)據(jù)提交范圍

新增了表單數(shù)據(jù)類型。input標(biāo)記中type屬性新增的取值如下表所示

4.3.3HTML5表

單

數(shù)

據(jù)

類

型

和

控

件

標(biāo)

記

增

加

HTML5在表單屬性和驗證其合法性方面進行了規(guī)范，大大地節(jié)省了瀏覽器端的代碼量，提交了代碼效率，提高了安全性。1.必填項屬性required。2.占位屬性placeholder，即還未輸入內(nèi)容的input中默認(rèn)顯示的占位字符。3.數(shù)字類型控件提供最大值max和最小值min的設(shè)置。4.正則表達式屬性pattern，定義比較復(fù)雜的規(guī)則。5.自動完成屬性autocompl