淺談網(wǎng)頁制作中表單的教學(xué)

李彩萍

[摘 要] 關(guān)于表單，不能只要求學(xué)生會(huì)做，還要讓他們理解表單及表單元素的屬性，會(huì)進(jìn)行基本的表單驗(yàn)證，為學(xué)習(xí)網(wǎng)頁的后續(xù)課程打下堅(jiān)實(shí)的基礎(chǔ)。

[關(guān) 鍵 詞] 表單；表單元素；屬性；表單驗(yàn)證

[中圖分類號(hào)] G712 [文獻(xiàn)標(biāo)志碼] A [文章編號(hào)] 2096-0603（2018）03-0073-01

表單在網(wǎng)頁中應(yīng)用非常廣泛，網(wǎng)站郵箱的注冊(cè)、登錄，網(wǎng)上訂單，調(diào)查問卷都離不開它，是學(xué)習(xí)網(wǎng)頁制作必須熟練掌握的內(nèi)容之一。

一、用表格布局表單

制作表單應(yīng)當(dāng)用表格布局。插入表格首先要根據(jù)表單的要求設(shè)定表格行數(shù)、列數(shù)、表格寬度，并將邊框粗細(xì)、單元格邊框、單元格間距三項(xiàng)的值均設(shè)為0，再從表單美觀的角度出發(fā)，設(shè)定每一列單元格的寬度、單元格的高度，并將單元格內(nèi)容居中顯示，然后在相應(yīng)單元格中放置表單內(nèi)容。

以上對(duì)表格的設(shè)定均是表格最基礎(chǔ)的操作，學(xué)生完成基本沒有難度。

二、表單元素屬性

學(xué)生在經(jīng)過一段時(shí)間的學(xué)習(xí)后，完成一個(gè)使用表格布局的表單是沒有問題的，但僅能夠完成表單是不夠的，還需要對(duì)表單元素的屬性有一定的認(rèn)識(shí)。表單元素屬性很多，為了不讓學(xué)生有畏難情緒，開始只要求他們掌握最基本的屬性。

學(xué)生在設(shè)計(jì)視圖中完成一個(gè)表單后，引導(dǎo)學(xué)生查看代碼視圖。在表單的代碼視圖中，出現(xiàn)最多的就是標(biāo)簽，比如，文本框、單選按鈕、復(fù)選框等都對(duì)應(yīng)標(biāo)簽。這些標(biāo)簽的type屬性是不同的，學(xué)生通過比較設(shè)計(jì)視圖和代碼視圖，可以總結(jié)出文本框type屬性為text，密碼文本框也是一個(gè)文本框，不過是將文本框的類型由默認(rèn)的單行改為密碼，對(duì)應(yīng)的type屬性為password，單選按鈕的type屬性為radio，復(fù)選框的type屬性為checkbox，按鈕的type屬性為button，提交和重置按鈕的type屬性分別為submit和reset。此處可以讓學(xué)生進(jìn)行這樣的練習(xí)，如將復(fù)選框的type屬性在代碼視圖下直接改為radio，查看頁面的變化，進(jìn)而讓學(xué)生明白標(biāo)簽的type屬性的作用。

另外，很多表單元素都有value屬性，教師可針對(duì)按鈕進(jìn)行直觀的演示，在設(shè)計(jì)視圖時(shí)將提交按鈕的值改為“點(diǎn)擊提交”，讓學(xué)生查找對(duì)應(yīng)代碼發(fā)生的變化，從而理解按鈕value屬性的作用。在表單中，不僅按鈕有value屬性，文本框也有value屬性，學(xué)生可以嘗試在代碼視圖中給文本框直接添加value屬性，再到設(shè)計(jì)視圖查看頁面的變化，就很容易理解文本框value屬性的作用。單選按鈕、復(fù)選框當(dāng)然也有value屬性，但由于不是很直觀，所以只要求學(xué)生會(huì)設(shè)定既可，至于value屬性的使用，那是后續(xù)課程的范疇。

對(duì)所有表單元素，要讓學(xué)生發(fā)現(xiàn)均有name屬性，name屬性就是表單元素的名稱。

以上表單元素都是最常用的，學(xué)生熟練掌握之后，可以再學(xué)習(xí)其他的表單元素，如下拉列表、文件域和多行文本框等，這些表單元素同樣也要掌握它們的常用屬性。

三、表單屬性

在能清楚認(rèn)識(shí)表單元素的基礎(chǔ)上，讓學(xué)生觀察表單標(biāo)簽，學(xué)生會(huì)看到表單有name屬性、method屬性和action屬性。表單name屬性很好理解，action屬性規(guī)定提交表單信息時(shí)，向何處發(fā)送表單數(shù)據(jù)，即處理表單數(shù)據(jù)的目標(biāo)地址，如不填，則默認(rèn)為當(dāng)前頁面。method屬性規(guī)定提交方式，取值為“get”或“post”，默認(rèn)為“post”。對(duì)method為get的表單，單擊提交按鈕后在地址欄可以看到以“鍵名=鍵值”形式提交的數(shù)據(jù)，而以post形式提交的表單，在地址欄沒有像get形式那樣以明文的形式進(jìn)行傳輸?shù)臄?shù)據(jù)，用戶不會(huì)看到所提交的數(shù)據(jù)，所以相對(duì)于get，post形式比較安全。以上兩個(gè)屬性較難理解，一定要進(jìn)行案例演示。

有的老師認(rèn)為學(xué)生只要會(huì)完成表單就可以了，再了解那么多屬性是給學(xué)生增加負(fù)擔(dān)，但是如果不會(huì)這些，學(xué)習(xí)網(wǎng)頁制作的后續(xù)內(nèi)容，比如，表單驗(yàn)證會(huì)遇到很多問題。

四、表單驗(yàn)證

表單驗(yàn)證是使用驗(yàn)證函數(shù)，在表單中的數(shù)據(jù)被送往服務(wù)器前檢查其是否是無效或錯(cuò)誤數(shù)據(jù)。表單驗(yàn)證包括的內(nèi)容非常多，例如，檢查表單元素是否為空、驗(yàn)證Email地址是否正確等。此處以對(duì)文本框、單選按鈕、復(fù)選框進(jìn)行非空驗(yàn)證為例。

無論進(jìn)行什么樣的驗(yàn)證，都要先找到表單元素，可以使用前面提過的name屬性，也可以使用id屬性，分別對(duì)應(yīng)get Elements By Name（ ）和get Element By Id（ ）方法。

獲取輸入文本框的值，即獲取文本框的value屬性值，該值是字符串。文本框非空驗(yàn)證，就是判斷字符串是否為空，可以通過比較字符串與空字符串是否相等進(jìn)行判斷，也可以通過字符串length屬性是否為0來判斷，學(xué)生掌握一種即可。

對(duì)單選按鈕，非空驗(yàn)證就是判斷單選按鈕是否被選中，即判斷單選按鈕的checked屬性是否為true。如果是單選按鈕組，可以使用for循環(huán)逐個(gè)判斷單選按鈕的checked屬性。

復(fù)選框的非空驗(yàn)證和單選按鈕的非空驗(yàn)證很相似，只要理解其中之一，另一個(gè)就可舉一反三了。

從以上內(nèi)容可以看出，對(duì)文本框、單選按鈕、復(fù)選框進(jìn)行非空驗(yàn)證無一例外都離不開表單元素的屬性，當(dāng)然對(duì)其他表單元素情況也一樣。

綜上所述，對(duì)表單，不只要讓學(xué)生在設(shè)計(jì)視圖熟悉它，也要在代碼視圖熟悉它；不但要會(huì)制作表單，還要理解其屬性，理解表單元素的屬性，這樣才能在今后的工作中自如地應(yīng)用表單。