HTML,JAVASCRIPT,JSP學(xué)習(xí)視頻 (10)

1、Dreamweaver網(wǎng)頁制作標(biāo)準(zhǔn)教程（CS4版）教師姓名：第10章使用表單本章簡(jiǎn)介：本章簡(jiǎn)介： 隨著網(wǎng)絡(luò)的普及，越來越多隨著網(wǎng)絡(luò)的普及，越來越多的人在網(wǎng)上擁有自己的個(gè)人網(wǎng)站。的人在網(wǎng)上擁有自己的個(gè)人網(wǎng)站。一般情況下，個(gè)人網(wǎng)站的設(shè)計(jì)者除一般情況下，個(gè)人網(wǎng)站的設(shè)計(jì)者除了想宣傳自己外，還希望收到他人了想宣傳自己外，還希望收到他人的反饋信息。表單為網(wǎng)站設(shè)計(jì)者提的反饋信息。表單為網(wǎng)站設(shè)計(jì)者提供了通過網(wǎng)絡(luò)接收用戶數(shù)據(jù)的平臺(tái)，供了通過網(wǎng)絡(luò)接收用戶數(shù)據(jù)的平臺(tái)，如注冊(cè)會(huì)員頁、網(wǎng)上訂貨頁、檢索如注冊(cè)會(huì)員頁、網(wǎng)上訂貨頁、檢索頁等，都是通過表單來收集用戶信頁等，都是通過表單來收集用戶信息。因此，表單是網(wǎng)站管理者與瀏

2、息。因此，表單是網(wǎng)站管理者與瀏覽者間溝通的橋梁。覽者間溝通的橋梁。課堂學(xué)習(xí)目標(biāo)使用表單使用表單應(yīng)用復(fù)選框和單選按鈕應(yīng)用復(fù)選框和單選按鈕創(chuàng)建列表和菜單創(chuàng)建列表和菜單10.1 使用表單課堂案例課堂案例產(chǎn)品訂單產(chǎn)品訂單創(chuàng)建表單創(chuàng)建表單表單的屬性表單的屬性單行文本域單行文本域隱藏域隱藏域10.1.1課堂案例產(chǎn)品訂單 使用使用“表單表單”按鈕插入表單。使用按鈕插入表單。使用“表格表格”按鈕插入表格。使用按鈕插入表格。使用“文本字段文本字段”按鈕插入文本字段。使用按鈕插入文本字段。使用“文本區(qū)域文本區(qū)域”按鈕插入文本區(qū)按鈕插入文本區(qū)域。使用域。使用“屬性屬性”面板設(shè)置表格、文本字段和文本區(qū)域的屬性。面板設(shè)

3、置表格、文本字段和文本區(qū)域的屬性。效果圖10.1.2創(chuàng)建表單在文檔中插入表單的具體操作步驟如下。在文檔中插入表單的具體操作步驟如下。（1 1）在文檔窗口中，將插入點(diǎn)放在希望插入表單的位置。）在文檔窗口中，將插入點(diǎn)放在希望插入表單的位置。（2 2）啟用）啟用“表單表單”命令，文檔窗口中出現(xiàn)一個(gè)紅色的虛輪廓線用命令，文檔窗口中出現(xiàn)一個(gè)紅色的虛輪廓線用來指示表單域。來指示表單域。創(chuàng)建表單10.1.3表單的屬性在文檔窗口中選擇表單，在文檔窗口中選擇表單，“屬性屬性”面板中出現(xiàn)表單屬性。面板中出現(xiàn)表單屬性。“屬性”面板10.1.4單行文本域 通常使用表單的文本域來接收用戶輸入的信息，文本域包括單通常使用

4、表單的文本域來接收用戶輸入的信息，文本域包括單行文本域、多行文本域、密碼文本域行文本域、多行文本域、密碼文本域3 3種。一般情況下，當(dāng)用戶輸入種。一般情況下，當(dāng)用戶輸入較少的信息時(shí)，使用單行文本域接收；當(dāng)用戶輸入較多的信息時(shí)，較少的信息時(shí)，使用單行文本域接收；當(dāng)用戶輸入較多的信息時(shí)，使用多行文本域接收；當(dāng)用戶輸入密碼等保密信息時(shí)，使用密碼文使用多行文本域接收；當(dāng)用戶輸入密碼等保密信息時(shí)，使用密碼文本域接收。本域接收。插入單行文本域插入單行文本域插入多行文本域插入多行文本域插入密碼文本域插入密碼文本域文本域?qū)傩晕谋居驅(qū)傩?0.1.5隱藏域 隱藏域在網(wǎng)頁中不顯示，只是將一些必要的信息存儲(chǔ)并提交給隱

5、藏域在網(wǎng)頁中不顯示，只是將一些必要的信息存儲(chǔ)并提交給服務(wù)器。插入隱藏域的操作類似于在高級(jí)語言中定義和初始化變量，服務(wù)器。插入隱藏域的操作類似于在高級(jí)語言中定義和初始化變量，對(duì)于初學(xué)者而言，不建議使用隱藏域。對(duì)于初學(xué)者而言，不建議使用隱藏域。 若要在表單域中插入隱藏域，先將光標(biāo)放在表單輪廓內(nèi)需要插若要在表單域中插入隱藏域，先將光標(biāo)放在表單輪廓內(nèi)需要插入隱藏域的位置，然后插入隱藏域。入隱藏域的位置，然后插入隱藏域。10.2 應(yīng)用復(fù)選框和單選按鈕課堂案例課堂案例留言板留言板單選按鈕單選按鈕單選按鈕組單選按鈕組復(fù)選框復(fù)選框10.2.1課堂案例留言板使用使用“單選單選”按鈕插入單選按鈕。使用按鈕插入單選

6、按鈕。使用“復(fù)選框復(fù)選框”按鈕插入復(fù)按鈕插入復(fù)選框。選框。效果圖10.2.2單選按鈕為了單選按鈕的布局更加合理，通常采用逐個(gè)插入單選按鈕的為了單選按鈕的布局更加合理，通常采用逐個(gè)插入單選按鈕的方式。若要在表單域中插入單選按鈕，先將光標(biāo)放在表單輪廓內(nèi)需方式。若要在表單域中插入單選按鈕，先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕的位置，然后插入單選按鈕。要插入單選按鈕的位置，然后插入單選按鈕。10.2.3單選按鈕組先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后啟用先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后啟用“單選按鈕組單選按鈕組”對(duì)話框。對(duì)話框。啟用啟用“單選按鈕組單選按鈕組”對(duì)話框

7、有以下幾種方法。對(duì)話框有以下幾種方法。單擊單擊“插入插入”面板面板“表單表單”選項(xiàng)卡中的選項(xiàng)卡中的“單選按鈕組單選按鈕組”按鈕。按鈕。選擇選擇“插入插入 表單表單 單選按鈕組單選按鈕組”命令。命令。10.2.4復(fù)選框 為了復(fù)選框的布局更加合理，通常采用逐個(gè)插入復(fù)選框的方式。為了復(fù)選框的布局更加合理，通常采用逐個(gè)插入復(fù)選框的方式。若要在表單域中插入復(fù)選框，先將光標(biāo)放在表單輪廓內(nèi)需要插入復(fù)選若要在表單域中插入復(fù)選框，先將光標(biāo)放在表單輪廓內(nèi)需要插入復(fù)選框的位置，然后插入復(fù)選框。框的位置，然后插入復(fù)選框。10.3 創(chuàng)建列表和菜單課堂案例課堂案例會(huì)員注冊(cè)表會(huì)員注冊(cè)表創(chuàng)建列表和菜單創(chuàng)建列表和菜單創(chuàng)建跳轉(zhuǎn)菜

8、單創(chuàng)建跳轉(zhuǎn)菜單課堂案例課堂案例旅游用戶登錄網(wǎng)頁旅游用戶登錄網(wǎng)頁創(chuàng)建文件域創(chuàng)建文件域創(chuàng)建圖像域創(chuàng)建圖像域提交、無、重置按鈕提交、無、重置按鈕10.3.1課堂案例會(huì)員注冊(cè)表使用使用“列表列表/ /菜單菜單”按鈕插入列表。使用按鈕插入列表。使用“屬性屬性”面板設(shè)置列表面板設(shè)置列表屬性。屬性。效果圖10.3.2創(chuàng)建列表和菜單插入下拉菜單插入下拉菜單 若要在表單域中插入下拉菜單，先將光標(biāo)放在表單輪廓內(nèi)需要插若要在表單域中插入下拉菜單，先將光標(biāo)放在表單輪廓內(nèi)需要插入菜單的位置，然后插入下拉菜單。入菜單的位置，然后插入下拉菜單。插入滾動(dòng)列表插入滾動(dòng)列表 若要在表單域中插入滾動(dòng)列表，先將光標(biāo)放在表單輪廓內(nèi)需要

9、插若要在表單域中插入滾動(dòng)列表，先將光標(biāo)放在表單輪廓內(nèi)需要插入滾動(dòng)列表的位置，然后插入滾動(dòng)列表。入滾動(dòng)列表的位置，然后插入滾動(dòng)列表。10.3.3創(chuàng)建跳轉(zhuǎn)菜單 利用跳轉(zhuǎn)菜單，設(shè)計(jì)者可將某個(gè)網(wǎng)頁的利用跳轉(zhuǎn)菜單，設(shè)計(jì)者可將某個(gè)網(wǎng)頁的URLURL地址與菜單列表中地址與菜單列表中的選項(xiàng)建立關(guān)聯(lián)。當(dāng)用戶瀏覽網(wǎng)頁時(shí)，只要從跳轉(zhuǎn)菜單列表中選擇的選項(xiàng)建立關(guān)聯(lián)。當(dāng)用戶瀏覽網(wǎng)頁時(shí)，只要從跳轉(zhuǎn)菜單列表中選擇一菜單項(xiàng)，就會(huì)打開相關(guān)聯(lián)的網(wǎng)頁。一菜單項(xiàng)，就會(huì)打開相關(guān)聯(lián)的網(wǎng)頁。在網(wǎng)頁中插入跳轉(zhuǎn)菜單的具體操作步驟如下。在網(wǎng)頁中插入跳轉(zhuǎn)菜單的具體操作步驟如下。（1 1）將光標(biāo)放在表單輪廓內(nèi)需要插入跳轉(zhuǎn)菜單的位置。）將光標(biāo)放在表單輪

10、廓內(nèi)需要插入跳轉(zhuǎn)菜單的位置。（2 2）啟用）啟用“插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單”命令，調(diào)出命令，調(diào)出“插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單”對(duì)話對(duì)話框，在對(duì)話框中進(jìn)行設(shè)置，單擊框，在對(duì)話框中進(jìn)行設(shè)置，單擊“確定確定”按鈕完成設(shè)置。按鈕完成設(shè)置。（3 3）保存文檔，在）保存文檔，在IEIE瀏覽器中單擊瀏覽器中單擊“前往前往”按鈕，網(wǎng)頁就可以按鈕，網(wǎng)頁就可以跳轉(zhuǎn)到其關(guān)聯(lián)的網(wǎng)頁上。跳轉(zhuǎn)到其關(guān)聯(lián)的網(wǎng)頁上。10.3.4課堂案例旅游用戶登錄網(wǎng)頁使用使用“文本字段文本字段”按鈕為用戶名和密碼插入文本字段。使用按鈕為用戶名和密碼插入文本字段。使用“列表列表/ /菜單菜單”按鈕制作出生日期效果。使用按鈕制作出生日期效果。使用“

11、圖像域圖像域”按鈕為網(wǎng)頁按鈕為網(wǎng)頁添加登錄按鈕。添加登錄按鈕。效果圖10.3.5創(chuàng)建文件域 網(wǎng)頁中要實(shí)現(xiàn)上傳文件的功能，需要在表單中插入文件域。文網(wǎng)頁中要實(shí)現(xiàn)上傳文件的功能，需要在表單中插入文件域。文件域的外觀與其他文本域類似，只是文件域還包含一個(gè)件域的外觀與其他文本域類似，只是文件域還包含一個(gè)“瀏覽瀏覽”按按鈕。用戶瀏覽時(shí)可以手動(dòng)輸入要上傳的文件路徑，也可以使用鈕。用戶瀏覽時(shí)可以手動(dòng)輸入要上傳的文件路徑，也可以使用“瀏瀏覽覽”按鈕定位并選擇該文件。按鈕定位并選擇該文件。 若要在表單域中插入文件域，則先將光標(biāo)放在表單輪廓內(nèi)需要若要在表單域中插入文件域，則先將光標(biāo)放在表單輪廓內(nèi)需要插入文件域的位

12、置，然后插入文件域。插入文件域的位置，然后插入文件域。10.3.6創(chuàng)建圖像域 普通的按鈕很不美觀，為了設(shè)計(jì)需要，常使用圖像代替按鈕。通普通的按鈕很不美觀，為了設(shè)計(jì)需要，常使用圖像代替按鈕。通常使用圖像按鈕來提交數(shù)據(jù)。常使用圖像按鈕來提交數(shù)據(jù)。插入圖像按鈕的具體操作步驟如下。插入圖像按鈕的具體操作步驟如下。（1 1） 將光標(biāo)放在表單輪廓內(nèi)需要插入的位置。將光標(biāo)放在表單輪廓內(nèi)需要插入的位置。（2 2）啟用）啟用“選擇圖像源文件選擇圖像源文件”對(duì)話框，選擇作為按鈕的圖像文件。對(duì)話框，選擇作為按鈕的圖像文件。（3 3）在）在“屬性屬性”面板中出現(xiàn)圖像按鈕的屬性，可以根據(jù)需要設(shè)置面板中出現(xiàn)圖像按鈕的屬性

13、，可以根據(jù)需要設(shè)置該圖像按鈕的各項(xiàng)屬性。該圖像按鈕的各項(xiàng)屬性。（4 4）若要將某個(gè)）若要將某個(gè) JavaScript JavaScript 行為附加到該按鈕上，則選擇該圖行為附加到該按鈕上，則選擇該圖像，然后在像，然后在“行為行為”控制面板中選擇相應(yīng)的行為?？刂泼姘逯羞x擇相應(yīng)的行為。（5 5）完成設(shè)置后保存并預(yù)覽網(wǎng)頁。）完成設(shè)置后保存并預(yù)覽網(wǎng)頁。10.3.7提交、無、重置按鈕 按鈕的作用是控制表單的操作。一般情況下，表單中設(shè)有提交按按鈕的作用是控制表單的操作。一般情況下，表單中設(shè)有提交按鈕、重置按鈕和普通按鈕鈕、重置按鈕和普通按鈕3 3種按鈕。提交按鈕的作用是，將表單數(shù)據(jù)提種按鈕。提交按鈕的作用是，將表單數(shù)據(jù)提交到表單指定的處理程序中進(jìn)行處理；重置按鈕的作用是，將表單的交到表單指定的處理程序中進(jìn)行處