HTML,JAVASCRIPT,JSP學習視頻 (10)

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

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

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

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

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

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

7、有以下幾種方法。對話框有以下幾種方法。單擊單擊“插入插入”面板面板“表單表單”選項卡中的選項卡中的“單選按鈕組單選按鈕組”按鈕。按鈕。選擇選擇“插入插入 表單表單 單選按鈕組單選按鈕組”命令。命令。10.2.4復選框 為了復選框的布局更加合理，通常采用逐個插入復選框的方式。為了復選框的布局更加合理，通常采用逐個插入復選框的方式。若要在表單域中插入復選框，先將光標放在表單輪廓內(nèi)需要插入復選若要在表單域中插入復選框，先將光標放在表單輪廓內(nèi)需要插入復選框的位置，然后插入復選框?？虻奈恢?，然后插入復選框。10.3 創(chuàng)建列表和菜單課堂案例課堂案例會員注冊表會員注冊表創(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課堂案例會員注冊表使用使用“列表列表/ /菜單菜單”按鈕插入列表。使用按鈕插入列表。使用“屬性屬性”面板設置列表面板設置列表屬性。屬性。效果圖10.3.2創(chuàng)建列表和菜單插入下拉菜單插入下拉菜單 若要在表單域中插入下拉菜單，先將光標放在表單輪廓內(nèi)需要插若要在表單域中插入下拉菜單，先將光標放在表單輪廓內(nèi)需要插入菜單的位置，然后插入下拉菜單。入菜單的位置，然后插入下拉菜單。插入滾動列表插入滾動列表 若要在表單域中插入滾動列表，先將光標放在表單輪廓內(nèi)需要

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

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

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

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

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