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

模塊7表單的應用7.1認識表單7.2

<form>標簽屬性7.3表單控件7.4案例：制作會員信息登記表單思考與練習題

7.1認識表單

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

7.1.1?表單的構成

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

圖7-1表單的構成

7.1.2?創(chuàng)建表單

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

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

各種表單控件

</form>

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

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

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

7.2<form>標簽屬性

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

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

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

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

2.method屬性

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

3.name屬性

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

4.enctype屬性

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

5.novalidate屬性

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

【例7-2】取消表單驗證。

本例中，對<form>標簽應用novalidate屬性以取消表單驗證。在HTML5中，novalidate屬性的屬性值可以省略，相當于novalidate="novalidate"。當提交表單時，不會

對郵箱地址的規(guī)范性進行驗證。

7.3表單控件

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

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

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

<inputtype="text"/>

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

2.密碼輸入框(password)

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

<inputtype="password"/>

3.單選按鈕(radio)

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

<inputtype="radio"/>

【例7-3】單選按鈕應用。

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

圖7-3單選按鈕應用

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

4.復選框(checkbox)

復選框常用于多項選擇，如選擇興趣、愛好等。其語法格式如下：

<inputtype="checkbox"/>

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

【例7-4】復選框應用。

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

圖7-4復選框應用

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

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

5.提交按鈕(submit)

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

<inputtype="submit"/>

提交按鈕上的默認文本為“提交”，可以通過設置value屬性來改變按鈕上的默認文本。在我們學習了后端技術后會進一步理解提交按鈕的作用。

6.重置按鈕(reset)

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

<inputtype="reset"/>

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

7.普通按鈕(button)

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

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

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

8.圖像提交按鈕(image)

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

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

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

9.文件域(file)

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

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

<inputtype="file"/>

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

【例7-5】文件域的應用。

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

10.隱藏域(hidden)

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

格式如下：

<inputtype="hidden"/>

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

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

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

<inputtype="email"/>

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

12.URL地址輸入框(url)

url類型是用于輸入URL地址的文本框。其語法格式如下：

<inputtype="url"/>

如果輸入的值不符合URL地址格式，會有錯誤提示。

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

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

<inputtype="tel"/>

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

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

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

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

<inputtype="number"/>

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

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

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

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

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

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

<inputtype="range"/>

【例7-7】range控件的應用。

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

圖7-7range控件的應用

16.搜索框(search)

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

搜索框語法格式如下：

<inputtype="search"/>

17.拾色器控件(color)

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

<inputtype="color"/>

【例7-8】color控件的應用。

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

18.日期和時間選擇控件

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

【例7-9】日期時間控件的應用。

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

圖7-9日期時間控件的應用

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

7.3.2?textarea元素

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

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

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

【例7-10】多行文本框的應用。

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

圖7-10多行文本框的應用

7.3.3?select元素

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

在上面的語法中，<select></select>標簽用于在表單中添加一個下拉列表，<option>標簽作為<select>的子標簽，用于定義下拉列表的具體選項。<select>和<option>標簽的

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

【例7-11】下拉列表的應用。

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

圖7-11下拉列表的應用

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

7.4案例：制作會員信息登記表單

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

【練習目標】

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

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

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

【案例源代碼】

【運行結果】

源代碼在瀏覽器中的運行結果如圖7-12所示。

圖7-12案例運行結果

【案例分析】

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

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