Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第四單元 表單的應(yīng)用

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

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

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

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

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

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

在表單中插入隱藏域，它不會(huì)顯示在網(wǎng)頁(yè)上，對(duì)用戶來(lái)說(shuō)是不可見(jiàn)的，它常會(huì)存儲(chǔ)一個(gè)默認(rèn)值，該值也可以由JavaScript進(jìn)行修改。基本說(shuō)明：語(yǔ)法說(shuō)明：

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

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

<select></select>插入下拉列表，<option></option>插入列表項(xiàng)。

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

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

<label>標(biāo)記為input元素定義標(biāo)注的標(biāo)記，該標(biāo)記不會(huì)向用戶呈現(xiàn)任何特殊效果，不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。表現(xiàn)為在label元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)記時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)記相關(guān)的表單控件上?；菊f(shuō)明：語(yǔ)法說(shuō)明：<label>標(biāo)記為雙標(biāo)記。該標(biāo)記的for屬性可把label綁定到另外一個(gè)元素（把"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)容將會(huì)以XML的形式提交。這意味著數(shù)據(jù)的提交從單純的線性字符串走向結(jié)構(gòu)性的對(duì)象數(shù)據(jù)?；菊f(shuō)明：

服務(wù)器將接收到類似JSON這樣的XML格式的表單數(shù)據(jù)?？蛻舳藗鱽?lái)的數(shù)據(jù)要用到多媒體傳輸協(xié)議，所以表單提交方式必須是post方式。4.3.1HTML5數(shù)據(jù)提交格式

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

以上代碼片段可以看出HTML5標(biāo)準(zhǔn)下可以使控件游離在form標(biāo)記外，有助于用戶不拘泥于頁(yè)面的結(jié)構(gòu)，可以在頁(yè)面任意位置將數(shù)據(jù)提交出去。具體實(shí)現(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在表單屬性和驗(yàn)證其合法性方面進(jìn)行了規(guī)范，大大地節(jié)省了瀏覽器端的代碼量，提交了代碼效率，提高了安全性。1.必填項(xiàng)屬性required。2.占位屬性placeholder，即還未輸入內(nèi)容的input中默認(rèn)顯示的占位字符。3.數(shù)字類型控件提供最大值max和最小值min的設(shè)置。4.正則表達(dá)式屬性pattern，定義比較復(fù)雜的規(guī)則。5.自動(dòng)完成屬性autocompl