淺談網頁制作中表單的教學

李彩萍

[摘 要] 關于表單，不能只要求學生會做，還要讓他們理解表單及表單元素的屬性，會進行基本的表單驗證，為學習網頁的后續課程打下堅實的基礎。

[關 鍵 詞] 表單；表單元素；屬性；表單驗證

[中圖分類號] G712 [文獻標志碼] A [文章編號] 2096-0603（2018）03-0073-01

表單在網頁中應用非常廣泛，網站郵箱的注冊、登錄，網上訂單，調查問卷都離不開它，是學習網頁制作必須熟練掌握的內容之一。

一、用表格布局表單

制作表單應當用表格布局。插入表格首先要根據表單的要求設定表格行數、列數、表格寬度，并將邊框粗細、單元格邊框、單元格間距三項的值均設為0，再從表單美觀的角度出發，設定每一列單元格的寬度、單元格的高度，并將單元格內容居中顯示，然后在相應單元格中放置表單內容。

以上對表格的設定均是表格最基礎的操作，學生完成基本沒有難度。

二、表單元素屬性

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

學生在設計視圖中完成一個表單后，引導學生查看代碼視圖。在表單的代碼視圖中，出現最多的就是標簽，比如，文本框、單選按鈕、復選框等都對應標簽。這些標簽的type屬性是不同的，學生通過比較設計視圖和代碼視圖，可以總結出文本框type屬性為text，密碼文本框也是一個文本框，不過是將文本框的類型由默認的單行改為密碼，對應的type屬性為password，單選按鈕的type屬性為radio，復選框的type屬性為checkbox，按鈕的type屬性為button，提交和重置按鈕的type屬性分別為submit和reset。此處可以讓學生進行這樣的練習，如將復選框的type屬性在代碼視圖下直接改為radio，查看頁面的變化，進而讓學生明白標簽的type屬性的作用。

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

對所有表單元素，要讓學生發現均有name屬性，name屬性就是表單元素的名稱。

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

三、表單屬性

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

有的老師認為學生只要會完成表單就可以了，再了解那么多屬性是給學生增加負擔，但是如果不會這些，學習網頁制作的后續內容，比如，表單驗證會遇到很多問題。

四、表單驗證

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

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

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

對單選按鈕，非空驗證就是判斷單選按鈕是否被選中，即判斷單選按鈕的checked屬性是否為true。如果是單選按鈕組，可以使用for循環逐個判斷單選按鈕的checked屬性。

復選框的非空驗證和單選按鈕的非空驗證很相似，只要理解其中之一，另一個就可舉一反三了。

從以上內容可以看出，對文本框、單選按鈕、復選框進行非空驗證無一例外都離不開表單元素的屬性，當然對其他表單元素情況也一樣。

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