《網(wǎng)頁設(shè)計(jì)與制作》《網(wǎng)頁設(shè)計(jì)與制作》1第6章表單6.16.26.3實(shí)例導(dǎo)入：創(chuàng)建用戶信息注冊表創(chuàng)建表單插入表單對象第6章表單實(shí)例導(dǎo)入：創(chuàng)建用戶信息注冊表創(chuàng)2本章主要介紹了通過表單可以實(shí)現(xiàn)瀏覽器與服務(wù)器之間的信息交流，在WWW上表單被廣泛用于各種信息的收集和反饋，如圖所示?！颈菊聦W(xué)習(xí)目的】本章通過一個(gè)用戶注冊信息表的實(shí)例，重點(diǎn)介紹了表單的創(chuàng)建、表單對象的插入，通過本章的學(xué)習(xí)，讀者應(yīng)了解表單的用途，掌握插入表單和表單對象的方法，了解通過Dreamweaver內(nèi)部行為驗(yàn)證用戶輸入信息的正確性。本章主要介紹了通過表單可以實(shí)現(xiàn)瀏覽器與服務(wù)器之間3281-《網(wǎng)頁設(shè)計(jì)與制作》課件46.1 實(shí)例導(dǎo)入：利用表單創(chuàng)建用戶信息

注冊表表單是使網(wǎng)站實(shí)現(xiàn)交互功能的重要途徑，通過表單可以收集站點(diǎn)訪問者的信息。表單可以簡單用做調(diào)查工具和收集客戶登錄信息，也可用于制作復(fù)雜的電子商務(wù)系統(tǒng)。一般表單的工作流程如下：訪問者在瀏覽有表單的網(wǎng)頁時(shí)，填寫必須的信息，然后按下按鈕提交；這些信息是通過Internet傳送到服務(wù)器上；服務(wù)器上的表單處理應(yīng)用程序（CGI），或腳本程序（ASP、PHP）對數(shù)據(jù)進(jìn)行處理；數(shù)據(jù)處理完畢后，服務(wù)器反饋處理信息。從表單的工作流程來看，表單的開發(fā)分為兩部分，一是具體在網(wǎng)頁上制作的表單項(xiàng)目，這一部分稱為前端，主要在Dreamweaver中制作，另一部分是編寫處理表單信息的應(yīng)用程序，這一部分稱為后端，如：ASP、CGI、PHP、JSP等。本章內(nèi)容主要講解的是前端的設(shè)計(jì)，后臺的開發(fā)將在網(wǎng)絡(luò)程序開發(fā)中具體介紹。6.1 實(shí)例導(dǎo)入：利用表單創(chuàng)建用戶信息

注冊表5【例6.1】利用表單創(chuàng)建用戶信息注冊表，如圖所示。【例6.1】利用表單創(chuàng)建用戶信息注冊表，如圖所示。6在本實(shí)例主要涉及到以下知識點(diǎn)：布局網(wǎng)頁；創(chuàng)建表單；在表單中插入表單對象；將表單信息提交到網(wǎng)絡(luò)管理者的郵箱。281-《網(wǎng)頁設(shè)計(jì)與制作》課件76.2創(chuàng)建表單

表單相當(dāng)于一個(gè)容器，它容納的是承載數(shù)據(jù)的表單對象，例如：文本框、復(fù)選框等。因此一個(gè)完整的表單包括二部分：表單及表單對象，二者缺一不可。6.2創(chuàng)建表單86.2.1表單網(wǎng)頁的布局在包含表單的網(wǎng)頁，一般仍采用表格排版方式。其操作步驟如下：步驟1新建一個(gè)網(wǎng)頁，添加頁面背景，插入一個(gè)表單，出現(xiàn)一個(gè)紅色虛線框。步驟2在表單中，插入表格，采用表格排版，在表格中，插入圖像或動(dòng)畫、文本加以修飾，并用CSS樣式美化網(wǎng)頁。如圖所示。步驟3最后在表格中插入表單對象。6.2.1表單網(wǎng)頁的布局在包含表單的網(wǎng)頁，一般96.2.2創(chuàng)建表單1.插入表單插入表單常用的方法有以下兩種：方法一：單擊“插入”欄｜“表單”選項(xiàng)｜“表單”按鈕。方法二：選擇“插入”菜單｜“表單”｜“表單”命令。在網(wǎng)頁中出現(xiàn)一個(gè)紅色的虛線框。表單的作用是當(dāng)訪問者單擊表單的“提交”按鈕時(shí)，瀏覽器將表單對象所包含的數(shù)據(jù)發(fā)送到服務(wù)器，因此表單對象必須置于表單中。6.2.2創(chuàng)建表單1.插入表單102.設(shè)置表單屬性單擊“表單”外框，或單擊“文檔”窗口左下角的<Form>標(biāo)簽，選擇表單。在“屬性”面板中設(shè)置表單屬性。2.設(shè)置表單屬性11

表單面板共有14個(gè)表單域?qū)ο蟆?.3插入表單對象表單面板共有14個(gè)表單域?qū)ο蟆?.3插入表單對象121.文本字段和文本區(qū)域（1）文本字段文本字段是用來輸入文本信息的。單擊“插入”欄｜“表單”選項(xiàng)｜“文本字段”按鈕，或選擇“插入”菜單｜“表單”｜“文本域”命令，彈出“標(biāo)簽輸助功能屬性”的對話框，如圖所示，輸入標(biāo)簽文本，如用戶名，單擊“確定”按鈕，即插入了一個(gè)文本字段。單擊“文本字段”對象，將其選中，在“屬性”面板中設(shè)置“文本字段”的屬性。1.文本字段和文本區(qū)域13（2）文本區(qū)域文本區(qū)域同樣也是用來輸入文本信息的，當(dāng)文本字段的類型選擇為多行時(shí)，即是文本區(qū)域。其屬性與文本字段相同。單擊“插入”欄｜“表單”選項(xiàng)｜“文本區(qū)域”按鈕，或選擇“插入”菜單｜“表單”｜“文本區(qū)域”命令，即插入“文本區(qū)域”對象。281-《網(wǎng)頁設(shè)計(jì)與制作》課件142.復(fù)選框復(fù)選框是指從一組選項(xiàng)中選擇多個(gè)選項(xiàng)。操作步驟如下：單擊“插入”欄｜“表單”選項(xiàng)｜“復(fù)選框”按鈕，或選擇“插入”菜單｜“表單”｜“復(fù)選框”命令，即插入“復(fù)選框”對象。單擊“復(fù)選框”對象，將其選中，在“屬性”面板中設(shè)置“復(fù)選框”的屬性，如圖所示。2.復(fù)選框153.單選按鈕及單選按鈕組（1）單選按鈕“單選按鈕”是指從一組選項(xiàng)中只能選擇一個(gè)選項(xiàng)。其操作步驟如下：單擊“插入”欄｜“表單”選項(xiàng)｜“單選”按鈕，或選擇“插入”菜單｜“表單”｜“單選按鈕”命令，即插入單選按鈕。單擊“單選按鈕”對象，將其選中，在“屬性”面板中設(shè)置“單選按鈕”的屬性：“單選按鈕”的名稱、選定值、初始狀態(tài)等，如圖所示。3.單選按鈕及單選按鈕組16（2）單選按鈕組

由于“單選按鈕”通常是由多個(gè)組成一組來使用，因此Dreamweaver提供了“單選按鈕組”的功能。單擊“插入”欄｜“表單”選項(xiàng)｜“單選按鈕組”按鈕，或選擇“插入”菜單｜“表單”｜“單選按鈕組”命令，彈出“單選按鈕組”對話框。（2）單選按鈕組174.列表／菜單“列表”和“菜單”可以在有限的空間內(nèi)為用戶提供更多的選項(xiàng)。“列表”在滾動(dòng)條中顯示選項(xiàng)值，并可允許用戶在列表中選擇多個(gè)選項(xiàng)?！安藛巍痹谙吕讲藛沃酗@示選項(xiàng)值，只允許用戶選擇一個(gè)選項(xiàng)。操作步驟如下：單擊“插入”欄｜“表單”選項(xiàng)｜“列表／菜單”按鈕，或選擇“插入”菜單｜“表單”｜“列表／菜單”命令，即插入“列表或菜單”。單擊“列表／菜單”，將其選中，在“屬性”面板中設(shè)置“列表／菜單”的屬性，如圖所示。4.列表／菜單185、跳轉(zhuǎn)菜單“跳轉(zhuǎn)菜單”與“菜單／列表”對象有所不同，菜單的每一個(gè)列表項(xiàng)目都鏈接到一個(gè)URL地址。一般常用于友情鏈接。單擊“插入”欄｜“表單”選項(xiàng)｜“跳轉(zhuǎn)菜單”按鈕，或選擇“插入”菜單｜“表單”｜“跳轉(zhuǎn)菜單”命令，彈出“插入跳轉(zhuǎn)菜單”的對話框，如圖所示。5、跳轉(zhuǎn)菜單196.文件域

“文件域”的作用是用戶在表單中選擇文件，然后將選中的文件內(nèi)容發(fā)送到服務(wù)器。例如：用戶在撰寫電子郵件時(shí)，采用文件域的方式，附加文件作為附件傳送。

單擊“插入欄”｜“表單”選項(xiàng)｜“文件域”按鈕，或選擇“插入”菜單｜“表單”｜“文件域”命令。單擊“文件域”對象，將其選中，在“屬性”面板中設(shè)置“文本域”的屬性：文本域的名稱、字符寬度、最多字符數(shù)等，如圖所示。6.文件域

“文件域”的作用是用戶在表單中選擇文件，然后將207.隱藏域“隱藏域”通常用來在表單之間傳遞數(shù)據(jù)，一般只用于腳本編程。單擊“插入欄”｜“表單”選項(xiàng)｜“隱藏域”按鈕，或選擇“插入”菜單｜“表單”選項(xiàng)｜“隱藏域”命令。8.按鈕“按鈕”的作用是控制表單操作。使用表單按鈕將輸入表單的數(shù)據(jù)提交到應(yīng)用程序，或者重置該表單，也可以用來執(zhí)行腳本指定的自定義功能。單擊“插入”欄｜“表單”選項(xiàng)｜“按鈕”按鈕，或選擇“插入”菜單｜“表單”｜“按鈕”命令，即插入“按鈕”。單擊“按鈕”，將其選中，在“屬性”面板中設(shè)置按鈕的屬性，如圖所示。7.隱藏域219.圖像域“圖像域”實(shí)質(zhì)上是以圖像形式顯示的提交按鈕，它的功能等同于提交按鈕。單擊“插入”欄｜“表單”選項(xiàng)｜“圖像域”按鈕，或選擇“插入”菜單｜“表單”｜“圖像域”命令，即插入“圖像域”。單擊圖像域，將其選中，在“屬性”面板中設(shè)置圖像域的屬性，如圖所示。9.圖像域226.3.3會(huì)員注冊表實(shí)例制作過程本小節(jié)講解【例6.1】創(chuàng)建用戶信息注冊表的制作過程，插入一個(gè)表單，再插入表單對象，而瀏覽者在瀏覽本網(wǎng)頁時(shí)，填寫表單信息，然后將信息提交到網(wǎng)絡(luò)管理員的電子郵件地址中。網(wǎng)絡(luò)管理員通過電子郵件來收集網(wǎng)站瀏覽者的信息。6.3.3會(huì)員注冊表實(shí)例制作過程236.3.4驗(yàn)證表單

利用Dreamweaver中“檢查表單”的內(nèi)部行為，檢查瀏覽者填寫表單對象的內(nèi)容是否符合事先設(shè)定的要求。一般使用OnSubmit事件將檢查表單的行為附加到表單上，當(dāng)用戶單擊“提交”按鈕時(shí)，同時(shí)對多個(gè)表單對象進(jìn)行檢查。分析上一小節(jié)表單實(shí)例，為了防止瀏覽者不填某些信息或亂填信息，這里設(shè)置登錄名、電子郵件地址必須填寫，年齡必須是數(shù)字且數(shù)字范圍為1-99，電子郵件必須是電子郵件的格式，針對這些要求，其操作步驟如下：步驟1選擇“窗口”菜單｜“行為”命令，打開“行為”面板。步驟2單擊“文檔”窗口左下角的<form>標(biāo)簽，選中整個(gè)表單，在“行為”面板中，單擊“添加行為”按鈕，在彈出菜單中選擇“檢查表單”命令，打開“檢查表單”對話框，進(jìn)行相關(guān)參數(shù)的設(shè)置。6.3.4驗(yàn)證表單利用Dreamweave24本章通過會(huì)員注冊信息表的實(shí)例講解，重點(diǎn)介紹了以下幾點(diǎn)：

插入表單及表單屬性的設(shè)置。在表單域中，插入表單對象并設(shè)置表單對象屬性。將表單提交到管理員電子郵箱中進(jìn)行處理。本章小結(jié)本章通過會(huì)員注冊信息表的實(shí)例講解，重點(diǎn)介紹了以下25

本章練習(xí)題

1.選擇題（1）表單中的按鈕對象分為（）。A．提交、重置B．提交、普通C．提交、重置、普通D．提交、圖像、普通（2）單選按鈕組中的多個(gè)單選按鈕名稱應(yīng)（）。A．相同B．不同C．任意D．以上都可以（3）文本域的類型有幾種（）。A．2種B．3種C．4種D．5種2.簡答題什么是表單？簡述表單的基本工作原理。表單對象包括哪些？如何驗(yàn)證表單？

本章練習(xí)題

1.選擇題26

上機(jī)實(shí)訓(xùn)

1.背景知識本章所學(xué)的插入表單、表單對象以及Dreamweaver內(nèi)部行為的檢驗(yàn)表單等知識，再結(jié)合前面所學(xué)的網(wǎng)頁編輯、頁面排版的知識，制作反饋表