《HTML5+CSS3網(wǎng)頁制作教程》課件-第7章

模塊7表單的應(yīng)用7.1認(rèn)識表單7.2

<form>標(biāo)簽屬性7.3表單控件7.4案例：制作會(huì)員信息登記表單思考與練習(xí)題

7.1認(rèn)識表單

“表單”聽起來比較陌生，其實(shí)在互聯(lián)網(wǎng)上隨處可見，如用戶登錄界面、會(huì)員注冊頁面、問卷調(diào)查、評論交流等都是表單的應(yīng)用。簡單來說，表單的作用就是用來實(shí)現(xiàn)網(wǎng)頁與用戶的交互、溝通。表單收集來自用戶的信息，并將信息發(fā)送給服務(wù)器做進(jìn)一步處理。

7.1.1?表單的構(gòu)成

一個(gè)完整的表單通常由表單域、提示信息和表單控件構(gòu)成，如圖7-1所示。

圖7-1表單的構(gòu)成

7.1.2?創(chuàng)建表單

在HTML中，我們使用<form></form>標(biāo)簽創(chuàng)建表單，由<form></form>標(biāo)簽定義的區(qū)域即表單域。創(chuàng)建表單的基本語法格式如下：

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

各種表單控件

</form>

【例7-1】創(chuàng)建表單。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-2所示。

圖7-2創(chuàng)建表單

7.2<form>標(biāo)簽屬性

1.action屬性action屬性用于指定表單數(shù)據(jù)提交到哪個(gè)地址進(jìn)行處理，這個(gè)地址一般是服務(wù)器中表單處理程序的地址。例如：<formaction="form_action.php">即表示當(dāng)提交表單時(shí)，表單數(shù)據(jù)會(huì)傳送到后端程序“form_action.php”中去處理。

action屬性值可以是相對地址也可以是絕對地址，還可以是郵箱地址。例如：

<formaction="mailto:htmlstudy@163.com">

即表示當(dāng)提交表單時(shí)，表單數(shù)據(jù)會(huì)以電子郵件的形式傳遞出去。

2.method屬性

method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post，如表7-1所示。

3.name屬性

name屬性用于指定表單的名稱。在一個(gè)頁面中，可能不止一個(gè)表單，為了防止這些表單提交到服務(wù)器后出現(xiàn)混亂，就通過定義name屬性來區(qū)分它們。

4.enctype屬性

enctype屬性用于設(shè)置表單數(shù)據(jù)在提交到服務(wù)器前的編碼方式，只有設(shè)置method="post"時(shí)才使用enctype屬性，其屬性值如表7-2所示。

5.novalidate屬性

novalidate屬性是HTML5中的新屬性，用于指定在提交表單時(shí)取消對表單進(jìn)行有效的檢查。為表單設(shè)置該屬性時(shí)，需關(guān)閉整個(gè)表單的驗(yàn)證，這樣可以使form內(nèi)的所有表單控件不被驗(yàn)證。

【例7-2】取消表單驗(yàn)證。

本例中，對<form>標(biāo)簽應(yīng)用novalidate屬性以取消表單驗(yàn)證。在HTML5中，novalidate屬性的屬性值可以省略，相當(dāng)于novalidate="novalidate"。當(dāng)提交表單時(shí)，不會(huì)

對郵箱地址的規(guī)范性進(jìn)行驗(yàn)證。

7.3表單控件

7.3.1?input元素input元素是表單中使用頻度最高的元素，網(wǎng)頁中常見的單行文本框、密碼框、單選按鈕、復(fù)選框等表單控件都是由它定義的，這些不同的控件類型由input元素的type屬性指定，type屬性值及說明如表7-3所示。

1.單行文本輸入框(text)

單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等。其語法格式如下：

<inputtype="text"/>

單行文本輸入框常用屬性如表7-4所示。

2.密碼輸入框(password)

密碼輸入框用來輸入密碼，其內(nèi)容一般以圓點(diǎn)的形式顯示，以掩飾輸入的真實(shí)密碼。其語法格式如下：

<inputtype="password"/>

3.單選按鈕(radio)

單選按鈕用于單項(xiàng)選擇，在定義單選按鈕時(shí)，必須為同一組中的單選按鈕指定相同的name值，這樣“單選”才會(huì)生效。其語法格式如下：

<inputtype="radio"/>

【例7-3】單選按鈕應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-3所示。

圖7-3單選按鈕應(yīng)用

本例有兩組單選按鈕，通過相同的name屬性值將同類單選按鈕分在一組，只有同組的單選按鈕才可以實(shí)現(xiàn)單選，例如性別選項(xiàng)中單選按鈕“男”和“女”的name值均為“gender”，表示它們?yōu)橐唤M，兩個(gè)單選按鈕只能選擇其一。另外，為單選按鈕添加checked屬性可以設(shè)定其為默認(rèn)選中項(xiàng)。

4.復(fù)選框(checkbox)

復(fù)選框常用于多項(xiàng)選擇，如選擇興趣、愛好等。其語法格式如下：

<inputtype="checkbox"/>

復(fù)選框不像單選按鈕那樣必須為同類復(fù)選框設(shè)置相同的name屬性值，但一般建議設(shè)置為相同name值，這樣便于后臺程序收集表單信息。

【例7-4】復(fù)選框應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-4所示。

圖7-4復(fù)選框應(yīng)用

本例中，復(fù)選框后面的提示信息使用<label>標(biāo)簽來定義，并且通過設(shè)置<label>標(biāo)簽的for屬性等于復(fù)選框的id值來實(shí)現(xiàn)它們之間的綁定。使用<label>標(biāo)簽和使用普通文

本的區(qū)別在于，當(dāng)用戶點(diǎn)擊<label>標(biāo)簽時(shí)即可實(shí)現(xiàn)當(dāng)前選項(xiàng)的選擇，<label>標(biāo)簽適用于input元素的任意控件。

5.提交按鈕(submit)

提交按鈕可以將表單內(nèi)容提交給服務(wù)器處理。其語法格式如下：

<inputtype="submit"/>

提交按鈕上的默認(rèn)文本為“提交”，可以通過設(shè)置value屬性來改變按鈕上的默認(rèn)文本。在我們學(xué)習(xí)了后端技術(shù)后會(huì)進(jìn)一步理解提交按鈕的作用。

6.重置按鈕(reset)

單擊重置按鈕可以清除用戶在表單中輸入的信息，所有表單控件的值都恢復(fù)成初始值。其語法格式如下：

<inputtype="reset"/>

重置按鈕上的默認(rèn)文本為“重置”，同樣可以通過設(shè)置value屬性來改變按鈕上的默認(rèn)文本。

7.普通按鈕(button)

普通按鈕只有按鈕的形態(tài)，通常需配合JavaScript腳本來實(shí)現(xiàn)具體功能。其語法格式如下：

<inputtype="button"value="按鈕上的文本"onclick="JavaScript腳本程序"/>

value屬性用來設(shè)置普通按鈕上的文本，onclick是單擊事件，當(dāng)單擊普通按鈕后將激發(fā)JavaScript腳本程序，在這里大家了解即可。

8.圖像提交按鈕(image)

圖像提交按鈕與提交按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，使按鈕的外觀更加多樣化。其語法格式如下：

<inputtype="image"src="圖像地址"/>

注意：需為圖像提交按鈕定義src屬性指定圖像的地址才能正常顯示。

9.文件域(file)

文件域用于選擇文件并提交給后臺服務(wù)器。當(dāng)定義文件域時(shí)，頁面中將出現(xiàn)“選擇文件”按鈕和選擇結(jié)果字段，用戶通過點(diǎn)擊“選擇文件”按鈕實(shí)現(xiàn)本地文件的選擇，被選擇

文件的文件名顯示在選擇結(jié)果字段中。文件域語法格式如下：

<inputtype="file"/>

注意，必須在<form>標(biāo)簽中定義編碼方式enctype="multipart/form-data"，服務(wù)器才能收到正確的文件信息。

【例7-5】文件域的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-5所示。圖7-5文件域的應(yīng)用

10.隱藏域(hidden)

有時(shí)候網(wǎng)站開發(fā)人員需要從前端頁面獲取一些數(shù)據(jù)發(fā)送到后臺服務(wù)器，但又不想讓用戶看見，那么就可以通過隱藏域來傳送數(shù)據(jù)，比如確認(rèn)用戶的身份信息等。隱藏域的語法

格式如下：

<inputtype="hidden"/>

在HTML的學(xué)習(xí)中我們幾乎用不到隱藏域，所以大家了解即可。

11.E-mail地址輸入框(email)

email類型的input元素是專門用于輸入E-mail地址的文本框。其語法格式如下：

<inputtype="email"/>

它會(huì)對輸入的內(nèi)容進(jìn)行驗(yàn)證，判斷是否符合電子郵件地址格式，如果不符合，會(huì)有錯(cuò)誤提示。

12.URL地址輸入框(url)

url類型是用于輸入U(xiǎn)RL地址的文本框。其語法格式如下：

<inputtype="url"/>

如果輸入的值不符合URL地址格式，會(huì)有錯(cuò)誤提示。

13.電話號碼輸入框(tel)

tel類型是用于輸入電話號碼的文本框。其語法格式如下：

<inputtype="tel"/>

由于電話號碼的格式千差萬別，很難實(shí)現(xiàn)一個(gè)通用的格式。因此，tel類型通常和pattern屬性配合使用，通過pattern屬性定義正則表達(dá)式進(jìn)行驗(yàn)證。例如，對11位手機(jī)號碼進(jìn)行驗(yàn)證的正則表達(dá)式為：“^\d{11}$”。

14.數(shù)值輸入框(number)

number類型是用于輸入數(shù)值的文本框。在提交表單時(shí)，會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會(huì)出現(xiàn)錯(cuò)誤提示。

數(shù)值輸入框語法格式如下：

<inputtype="number"/>

number類型的輸入框可以對輸入的數(shù)字進(jìn)行限制，規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認(rèn)值等，具體屬性如表7-5所示。

【例7-6】number數(shù)值輸入框的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-6所示。

圖7-6number數(shù)值輸入框應(yīng)用

15.數(shù)值范圍控件(range)

range類型用于提供一定范圍內(nèi)數(shù)值的輸入，在網(wǎng)頁中顯示為滑動(dòng)條。它的常用屬性與number類型一樣，通過min屬性設(shè)置最小值(默認(rèn)值是0)，通過max屬性設(shè)置最大值(默認(rèn)值是100)，通過step屬性指定每次滑動(dòng)的步長(默認(rèn)值是1)。數(shù)值范圍控件的語法格式如下：

<inputtype="range"/>

【例7-7】range控件的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-7所示。

圖7-7range控件的應(yīng)用

16.搜索框(search)

search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動(dòng)記錄一些字符。在用戶輸入內(nèi)容后，其右側(cè)會(huì)附帶一個(gè)刪除圖標(biāo)，單擊這個(gè)圖標(biāo)可以快速清除輸入的內(nèi)容。

搜索框語法格式如下：

<inputtype="search"/>

17.拾色器控件(color)

color類型用于實(shí)現(xiàn)一個(gè)RGB顏色的輸入，其基本形式是十六進(jìn)制顏色代碼#RRGGBB，默認(rèn)值為#000000(黑色)，通過value屬性值可以更改默認(rèn)顏色。單擊顏色條，可以快速打開拾色器面板，方便用戶可視化選取一種顏色。拾色器控件的語法格式如下：

<inputtype="color"/>

【例7-8】color控件的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-8所示。圖7-8color控件的應(yīng)用

18.日期和時(shí)間選擇控件

HTML5中提供了多個(gè)可供選取日期和時(shí)間的輸入類型。通過設(shè)置不同的type屬性值可實(shí)現(xiàn)多種類型的日期和時(shí)間的輸入，如表7-6所示。

【例7-9】日期時(shí)間控件的應(yīng)用。

上述代碼在谷歌瀏覽器中的預(yù)覽效果如圖7-9所示。

圖7-9日期時(shí)間控件的應(yīng)用

用戶可以直接向輸入框中輸入內(nèi)容，也可以點(diǎn)擊輸入框右側(cè)的按鈕進(jìn)行選擇。例如，點(diǎn)擊本例最后一個(gè)日期控件，則彈出如圖7-9所示的日期面板供用戶選擇。當(dāng)點(diǎn)擊“提交”按鈕時(shí)，表單會(huì)檢查用戶輸入的值是否為規(guī)范的日期時(shí)間格式，如果不是則提示錯(cuò)誤。

7.3.2?textarea元素

textarea元素用來定義多行文本輸入框，也稱作文本域。其語法格式如下：

<textarearows="行數(shù)"cols="列數(shù)">多行文本框內(nèi)容</textarea>

語法中的rows和cols屬性規(guī)定了多行文本框的尺寸，不過更好的辦法是使用CSS的height和width屬性定義高與寬。

【例7-10】多行文本框的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-10所示。

圖7-10多行文本框的應(yīng)用

7.3.3?select元素

select元素用來定義下拉列表。<select>標(biāo)簽需要和<option>標(biāo)簽配合使用。select元素的語法格式如下：

在上面的語法中，<select></select>標(biāo)簽用于在表單中添加一個(gè)下拉列表，<option>標(biāo)簽作為<select>的子標(biāo)簽，用于定義下拉列表的具體選項(xiàng)。<select>和<option>標(biāo)簽的

常用屬性如表7-7所示。

【例7-11】下拉列表的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖7-11所示。

圖7-11下拉列表的應(yīng)用

本例中，第一個(gè)下拉列表為單選，并通過selected="selected"設(shè)置了默認(rèn)選項(xiàng)。第二個(gè)下拉列表通過multiple屬性設(shè)置為多選，通過size屬性設(shè)置了可見的選項(xiàng)個(gè)數(shù)為5，設(shè)置了兩個(gè)默認(rèn)選項(xiàng)“音樂”和“旅游”。第二個(gè)下拉列表的multiple和selected屬性使用的是最小化表示方式，省略了屬性值。

7.4案例：制作會(huì)員信息登記表單

【案例描述】綜合應(yīng)用多個(gè)表單控件制作一個(gè)會(huì)員信息登記表單。案例源文件參考“模塊7案例”?！究己酥R點(diǎn)】表單的創(chuàng)建、表單控件的應(yīng)用。

【練習(xí)目標(biāo)】

(1)掌握表單的創(chuàng)建。

(2)掌握表單控件及其相關(guān)屬性。

(3)能夠熟練地運(yùn)用表單組織頁面元素。

【案例源代碼】

【運(yùn)行結(jié)果】

源代碼在瀏覽器中的運(yùn)行結(jié)果如圖7-12所示。

圖7-12案例運(yùn)行結(jié)果

【案例分析】

案例中應(yīng)用了單行文本框、單選按鈕、多行文本框等多個(gè)表單控件。其中，用戶名文本框中設(shè)置的disabled和readonly這兩個(gè)屬性，作用都是使用戶不能更改表單域中的內(nèi)容，它們的主要區(qū)別是在提交表單時(shí)，設(shè)置了disabled的表單元素的值不會(huì)被傳遞出去，而設(shè)置了readonly的值會(huì)被傳遞出去。昵稱文本框設(shè)置的autofocus屬性，表示每次加載頁面時(shí)，該控件都會(huì)自動(dòng)獲得焦點(diǎn)；required屬性表示輸入框中必須填寫內(nèi)容，不能為空。

手機(jī)號碼輸入框設(shè)置的pattern屬性，定義了驗(yàn)證輸入內(nèi)容的正則表達(dá)式為“^\d{11}$”，規(guī)定該輸入框中必須輸入