應用表單設計交互式網頁

摘要：目前大多數的網站，尤其是大中型的網站，都需要與用戶進行動態的交流，要實現與用戶的交互，表單必不可少的，它是企業與商戶的交流的窗口，可以更好的為網友提供服務。這種交互基本上是通過文本框、列表框進行輸入，然后通過按鈕提交至后臺數據庫來實現的。要將網頁中輸入的數據發送出去，例如將注冊頁中用戶輸入信息發送到后臺數據庫中，利用表單就可以很方便地實現。

關鍵詞：表單；交互；數據

中圖分類號：TP393文獻標識碼：A文章編號：1674-7712 (2014) 08-0000-01

一個完整的表單交互過程包括兩部分：網頁中的表單對象和腳本或程序。表單對象包括：文本域、隱藏域、復選框、單選按鈕、菜單列表和按鈕等。而腳本有JavaScript和VBScript兩種。完成注冊頁這個項目的實施可分為兩個步驟：（1）布局網頁；（2）插入表單。

一、布局網頁

1.在磁盤上創建web文件夾，在web文件夾中再創建images文件夾，以存放網站的圖像，編輯站點myweb：單擊“站點”“新建站點”菜單命令，在彈出的“站點設置對象未命名站點”對話框總進行輸入站點名稱myweb，使本地根文件夾為新建的web文件夾，默認圖像文件夾為web\\images文件夾。

2.新建reg.html，在頁面屬性對話框總選擇“外觀”分類，設置大小為12px，背景圖片設置為c39.gif。

3.插入一個寬度為500px、11行10列的表格，設置對齊方式為居中。將所有單元格選中，設置高度和寬度均為50px，對齊方式為左對齊，頂端對齊。分別設置各單元背景圖像，再將中間所有單元格合并。

二、插入表單

1.插入表單域：將光標定位在要插入表單的位置，單擊“窗口”→“插入”命令，打開插入工具欄，單擊“表單”分類中的“插入表單”按鈕，或執行“插入”→“表單”菜單命令，在表格中插入表單域對象。將光標移動到表單內，輸入“用戶名：”在屬性欄中設置：表單名稱為form1，方法為POST，動作為result.html，MIME類型為text/pail。

2.在表單內插入一個13行2列、寬100%的表格，間距為5。

3.在表格內糞便插入各種表單元素。

（1）添加“用戶名”（username）文本域：單擊插入工具欄“表單”類別中的文本域按鈕，生成一個文本域表單，設置用戶名的初始值為“yourmessage”。

（2）添加“密碼”（password）文本域：寬為10，最多字符為10。

（3）添加“密碼確認”（password2）文本域：寬為10，最多字符為10。

（4）添加“E-MAIL”（email）文本域：寬為10，最多字符為10。

（5）添加“性別”（sex）單選按鈕，名稱：男（選定值：1已選）、女（選定值：0未選中）

（6）添加“出生日期”菜單列表

年（year）：單擊屬性欄中的“列表值”按鈕，打開“列表值”對話框，在“項目標簽”列表中輸入菜單項目，單擊“值”輸入值。

月（month）：單擊屬性欄中的“列表值”按鈕，打開“列表值”對話框，添加月份1-12。

日（day）：打開“列表值”對話框，添加月份1-31。

（7）添加“頭像”菜單列表，打開“列表值”對話框添加頭像。

（8）添加“愛好”復選框。

音樂：name：love3；選定值：音樂。

運動：name：love4；選定值：運動。

旅游：name：love1；選定值：旅游。

上網：name：love2；選定值：上網。

（9）添加“個人簽名”（sign）文本域：字符寬度為30，行數為8。

（10）添加“生日”（birthday）隱藏域：隱藏域在瀏覽器是看不到的，也不能進行任何操作。

（11）添加按鈕。

提交：submit；值：提交；動作：提交表單。

重置：reset；值：重置；動作：重設表單。

4.為表單添加JavaScript腳本，如選擇頭像時及時顯示相應的頭像圖片，用戶名輸入正誤的檢查，驗證兩次密碼是否相同，等等。

（1）頭像及時更新：將光標定位于“頭像”列表中，單擊右鍵，在彈出菜單中選擇“編輯標簽”命令，進入“標簽編輯器”對話框，單擊“onChange”事件，輸入代碼“facepic.src=face.value”。

（2）用戶名輸入正誤檢查：用戶名不能為空，如果為空可以采用默認值。在“用戶名”文本域上單擊右鍵，在彈出菜單中選擇“編輯標簽”命令，進入“標簽編輯器”對話框，單擊“onBlur”事件，輸入代碼“if(this.value!=“”)this.value='your message'”。

（3）獲取生日：當出生日期進行修改后，表單要將年、月、日的數據收集傳遞到生日中。在“年”列表中，單擊右鍵，在彈出菜單中選擇“編輯標簽”命令，進入“標簽編輯器”對話框，單擊“onChange”事件，輸入代碼：

“birthday.value=year.value+'-'+month.value+'-'+day.value”。

（4）驗證兩次輸入密碼是否相同：密碼驗證是在提交按鈕單擊時進行，當兩此輸入密碼不同時清除密碼重新輸入，只有在兩次密碼相同時，才能完成正常的提交。在“提交”按鈕上，單擊右鍵，在彈出菜單中選擇“編輯標簽”命令，進入“標簽編輯器”對話框，輸入代碼：

if(password.value!=password2.value)

{

alert('兩次輸入的密碼不相同');

password.focus();

return 1;

}

else if(password.value.length<6||password.value.length>10)

{

alert('密碼長度不能少于6位，多于10位！');

password.focus();

return 1;

}

5.預覽網頁，查看網頁瀏覽效果。

參考文獻：

[1]馬威.DreamweaverCS3網頁制作[M].北京:清華大學出版社，2009.

[2]溫國封，孫膺.網頁制作與網站建設技術精粹[M].北京:清華大學出版社，2007.