《網(wǎng)頁制作》課件-項目十三 表單──制作注冊網(wǎng)頁

Dreamweaver8中文版

網(wǎng)頁制作基礎項目十三

表單──制作注冊網(wǎng)頁任務一創(chuàng)建表單任務二驗證表單實訓制作“注冊郵箱申請單”網(wǎng)頁表單是動態(tài)網(wǎng)頁的基礎，用戶通過它向服務器傳達自己的要求，服務器通過它收集瀏覽者的信息。制作這種能夠傳遞數(shù)據(jù)的表單網(wǎng)頁通常需要兩個步驟，一是制作表單，二是編寫應用程序。本項目以注冊網(wǎng)頁為例，介紹創(chuàng)建表單的基本方法，如何編寫應用程序將在后續(xù)項目中加以介紹。在本項目中，首先向網(wǎng)頁中添加各種表單對象，然后使用檢查表單行為等方法驗證表單。

任務一創(chuàng)建表單

需要掌握的內(nèi)容主要有：1、表單2、文本域3、單選按鈕4、列表／菜單5、復選框6、文本區(qū)域7、隱藏域8、按鈕9、文件域10、跳轉菜單11、字段集在主菜單中選擇【插入】／【表單】／【表單】命令可插入表。任何其他表單對象，都必須插入到表單中，瀏覽器才能正確處理這些數(shù)據(jù)。表單將以紅色虛線框顯示，但在瀏覽器中是不可見的。1、表單將光標置于表單內(nèi)，用鼠標單擊左下方的“<form>”標簽選中整個表單，可以在【屬性】面板中設置表單屬性。在主菜單中選擇【插入】／【表單】／【文本域】命令插入文本域。2、文本域當向密碼文本域輸入密碼時，這種類型的文本內(nèi)容顯示為“*”號。

在主菜單中選擇【插入】／【表單】／【單選按鈕】命令插入單選按鈕。在主菜單中選擇【插入】／【表單】／【單選按鈕組】命令，可以一次性在表單中插入多個單選按鈕。單選按鈕一般以兩個或者兩個以上的形式出現(xiàn)，它的作用是讓用戶在兩個或者多個選項中選擇一項。3、單選按鈕在主菜單中選擇【插入】／【表單】／【列表/菜單】命令，插入列表／菜單域。在【屬性】面板中打開【列表值】對話框，添加【項目標簽】和【值】。4、列表／菜單在主菜單中選擇【插入】／【表單】／【復選框】命令，插入復選框。由于復選框在表單中一般都不單獨出現(xiàn)，而是多個復選框同時使用，因此其【選定值】就顯得格外重要。由于復選框的【復選框名稱】不同，【選定值】可以取相同的值。5、復選框在主菜單中選擇【插入】／【表單】／【文本區(qū)域】命令，插入一個文本區(qū)域。6、文本區(qū)域在主菜單中選擇【插入】／【表單】／【隱藏域】命令，插入一個隱藏域。通常用隱藏域來傳遞一些特殊的信息，如注冊時間、認證號等。7、隱藏域在主菜單中選擇【插入】／【表單】／【按鈕】命令，插入按鈕。8、按鈕在主菜單中選擇【插入】／【表單】／【文件域】命令可以插入一個文件域，文件域的作用是使用戶可以瀏覽并選擇本地計算機上的某個文件，以便將該文件作為表單數(shù)據(jù)進行上傳。當然，真正上傳文件還需要相應的上傳組件才能進行，文件域僅僅是起供用戶瀏覽選擇計算機上文件的作用，并不起上傳的作用。9、文件域在主菜單中選擇【插入】／【表單】／【跳轉菜單】命令，可以在頁面中插入跳轉菜單。跳轉菜單的外觀和菜單相似，不同的是跳轉菜單具有超級鏈接功能。但是一旦在文檔中插入了跳轉菜單，就無法再對其進行修改了。如果要修改，只能將菜單刪除，然后再重新創(chuàng)建一個。但【跳轉菜單】行為，可以彌補這個缺陷。方法是分別選定跳轉菜單域和按鈕，在【行為】面板中雙擊【跳轉菜單】和【跳轉菜單開始】，將再次打開【跳轉菜單】和【跳轉菜單開始】對話框，然后進行修改即可。

10、跳轉菜單

在主菜單中選擇【插入】／【表單】／【字段集】命令，可以在頁面中插入一個字段集。使用字段集可以在頁面中顯示一個圓角矩形框，可以將一些相關的內(nèi)容放在一起。可以先插入字段集，然后再在其中插入相關的內(nèi)容。也可以先插入內(nèi)容，然后將其選擇再插入字段集。11、字段集

任務二驗證表單

需要掌握的內(nèi)容主要有：

1、【檢查表單】行為

2、密碼驗證的方法選中整個表單，然后在行為菜單中選擇【檢查表單】命令，打開【檢查表單】對話框進行設置。在【行為】面板中檢查默認事件是否是“onSubmit”。1、【檢查表單】行為確認密碼無法使用“行為”來檢驗，但可以通過簡單的JavaScript來驗證。在表單中右鍵單擊【注冊】按鈕，在彈出的菜單中選擇【編輯標簽〔E〕<input>】命令，打開【標簽編輯器－input】對話框，在對話框中選中“onClick”事件，在右側的文本框中輸入代碼即可。

2、密碼驗證的方法

實訓制作“注冊郵箱申請單”網(wǎng)頁本項目介紹了表單在網(wǎng)頁中的具體應用，本實訓將讓讀者進一步鞏固所學的基本知識。要求：使用表單創(chuàng)建如圖所示的“注冊郵箱申請單”網(wǎng)頁。制作“送孟浩然之廣陵”網(wǎng)頁