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

Dreamweaver8中文版

網(wǎng)頁(yè)制作基礎(chǔ)項(xiàng)目十三

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

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

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

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

10、跳轉(zhuǎn)菜單

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

任務(wù)二驗(yàn)證表單

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

1、【檢查表單】行為

2、密碼驗(yàn)證的方法選中整個(gè)表單，然后在行為菜單中選擇【檢查表單】命令，打開(kāi)【檢查表單】對(duì)話框進(jìn)行設(shè)置。在【行為】面板中檢查默認(rèn)事件是否是“onSubmit”。1、【檢查表單】行為確認(rèn)密碼無(wú)法使用“行為”來(lái)檢驗(yàn)，但可以通過(guò)簡(jiǎn)單的JavaScript來(lái)驗(yàn)證。在表單中右鍵單擊【注冊(cè)】按鈕，在彈出的菜單中選擇【編輯標(biāo)簽〔E〕<input>】命令，打開(kāi)【標(biāo)簽編輯器－input】對(duì)話框，在對(duì)話框中選中“onClick”事件，在右側(cè)的文本框中輸入代碼即可。

2、密碼驗(yàn)證的方法

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