第17章表單及其應(yīng)用 17 1交互式表單概述17 2創(chuàng)建表單17 3表單的應(yīng)用實例17 4本章小結(jié) 本章重點 交互式表單的特點表單及表單域的應(yīng)用表單應(yīng)用實例 17 1交互式表單概述表單 Form 技術(shù)可以實現(xiàn)瀏覽者同Internet服務(wù)器之間信息的交互傳送 它是網(wǎng)絡(luò)信息收集處理的一種重要的方式 通過表單可以從網(wǎng)絡(luò)的用戶端收集信息 然后將收集來的信息經(jīng)過服務(wù)器處理后再返饋給用戶 無論是電子商務(wù) 網(wǎng)上調(diào)查 還是留言板 聊天室 都要求網(wǎng)頁能夠接收瀏覽者輸入的信息 而表單就是網(wǎng)站獲取用戶信息的最重要的手段之一 表單有兩個重要的組成部分 1 由Dreamweaver8生成的表單的HTML頁面 2 用于處理瀏覽者在表單域中輸入的信息的服務(wù)器端應(yīng)用程序或客戶端腳本 瀏覽者在網(wǎng)頁上看到有關(guān)表單的頁面 只是供瀏覽者輸入信息的表單頁面 當(dāng)瀏覽者按要求在表單中填寫有關(guān)信息 單擊表單的遞交 Submit 按鈕之后 表單內(nèi)容就會上傳到服務(wù)器 并且由事先編好的服務(wù)器端程序來處理這些信息 最后服務(wù)器再將處理結(jié)果發(fā)送給瀏覽者的瀏覽器 由此可見 表單的應(yīng)用必須依賴于服務(wù)器端腳本才能真正發(fā)揮其功能 17 2創(chuàng)建表單表單主要的功能是接收輸入的信息 瀏覽者輸入的信息可以是多種多樣的 這些不同類別的信息可以由不同的表單域分別接收 因為每個表單域?qū)?yīng)一個項目 所以每個表單域都要添加一個標(biāo)識 提醒用戶在這個表單域中應(yīng)該輸入的內(nèi)容 在網(wǎng)頁中創(chuàng)建一個表單的方法有3種 1 將光標(biāo)定位在要插入表單的位置上 選擇 插入 表單 表單 命令 便可在網(wǎng)頁的指定位置上插入一個紅色虛線構(gòu)成的表單區(qū)域 2 將光標(biāo)定位在要插入表單的位置上 單擊 插入 欄 表單 選項中的 表單 按鈕 便可在網(wǎng)頁的指定位置上插入一個表單區(qū)域 3 直接將 插入 欄 表單 選項中的 表單 按鈕拖入網(wǎng)頁文檔窗口的表單插入?yún)^(qū)域 用以上三種方法創(chuàng)建的表單區(qū)域 在頁面上用紅色虛線框表示 紅色虛線框確定了當(dāng)前表單的邊框 這種紅色邊框的大小是不能被編輯的 當(dāng)設(shè)計者在表單區(qū)域中插入對象后 表單的區(qū)域會自動調(diào)整其大小 在創(chuàng)建表單后 就可以在表單中插入各種表單域 要在網(wǎng)頁中插入表單域有兩種方法 一種方法是利用網(wǎng)頁文檔窗口的菜單命令 選擇 插入 表單 命令 在其級聯(lián)菜單中選擇相應(yīng)的命令插入表單域 另一種方法是切換到 插入 欄 表單 選項 從中選擇要插入的表單域 本章主要介紹直接從 表單 選項中選擇有關(guān)表單域 然后將其插入到網(wǎng)頁中 下面先簡要介紹Dreamweaver8的表單域的特點 1 文本字段 用來輸入的文字或數(shù)字 2 文本區(qū)域 插入的文本可顯示為單行 多行 但是瀏覽者輸入文字較麻煩 故在表單中應(yīng)少用文本框 盡可能使用其它的表單對象 3 按鈕 表單中一般有兩個按鈕 一個是 提交 按鈕 單擊此按鈕可把瀏覽者輸入的信息發(fā)送給服務(wù)器 另一個是 重置 按鈕 用來清除表單中的內(nèi)容 把當(dāng)前表單還原為初始狀態(tài) 4 復(fù)選框 復(fù)選框可以單獨使用 也可以成組使用 有選中與不選中兩種狀態(tài) 5 單選按鈕 單選按鈕常用于一組互斥選擇 如 男 女 等 6 單選按鈕組 創(chuàng)建一組在表單中使用的單選按鈕 7 列表按鈕 常用于提交一組可供瀏覽者進(jìn)行選擇的列表選項 其表現(xiàn)方式為當(dāng)單擊它右側(cè)的按鈕時 彈出一個下拉式列表 瀏覽者可單擊列表中某一選項 它在功能上與單選按鈕相似 可以提供瀏覽者在多個備選項中作一個選擇 它占有網(wǎng)頁的面積比單選按鈕小的多 8 文件域 文件域有一個文本框和一個瀏覽按鈕 讓瀏覽者從本地計算機(jī)上用表單向服務(wù)器上傳文件 9 隱藏域 表單的隱藏域在瀏覽時是看不到的 瀏覽者也不能執(zhí)行該操作 利用隱藏域可以實現(xiàn)瀏覽器同服務(wù)器在后臺不公開地交換信息 10 圖片域 用于顯示圖片 也可用作確認(rèn)按鈕 11 跳轉(zhuǎn)菜單 插入一個跳轉(zhuǎn)菜單 每個菜單選項都可鏈接到一個網(wǎng)頁或文件 17 2 1創(chuàng)建表單的文本框表單中的文本框是網(wǎng)頁中常見一種表單元素 網(wǎng)頁中表單的文本框包括3種形式 1 單行文本框 是瀏覽者只能輸入一行信息的文本區(qū)域 2 多行文本框 是可由網(wǎng)頁設(shè)計者限定文本的行數(shù) 并決定是否顯示滾動條 瀏覽者可在這種文本框中輸入多行文本信息 3 密碼 文本框是一種可以讓瀏覽者輸入密碼信息的文本框 輸入的字符都以 號顯示在屏幕上 下面將介紹創(chuàng)建一個帶有文本框的最基本的表單 通過創(chuàng)建這個簡單的表單來了解表單創(chuàng)建的過程 其操作步驟如下 1 單擊 插入 欄 表單 選項 2 此時在 插入 欄 表單 選項中顯示的各種對象 如圖17 1所示 3 在網(wǎng)頁文檔窗口中 確定要插入的表單位置 4 單擊 表單 選項中的 表單 按鈕 便可在網(wǎng)頁編輯區(qū)中生成一個表單 此時表單被一個紅色虛線框界定 單擊紅色虛線框 可以選中表單區(qū)域 在 屬性 面板中顯示了這個表單區(qū)域的屬性 如圖17 2所示 圖17 1 插入 欄 表單 選項 圖17 2表單的 屬性 面板 表單的 屬性 面板中各屬性具體意義如下 在 表單名稱 文本框中輸入指定表單的名稱 表單的名稱必須唯一 在 動作 文本框中可以輸入一個URL 用來指定處理表單信息的服務(wù)端的程序 也可以輸入mailto 郵件地址 用Email方式來發(fā)送表單中的數(shù)據(jù) 在 方法 下拉式列表中指定一個處理表單數(shù)據(jù)的方法 其下拉列表中的各項意義如下所述 默認(rèn) 使用瀏覽器的默認(rèn)方式 一般為GET方式 GET 表示把表單值附加到URL 并發(fā)送給服務(wù)器一個GET請求 POST 以消息方式發(fā)送表單的值 并發(fā)送給服務(wù)器一個POST請求 在 目標(biāo) 下拉式列表中指定一個窗口方式 在該窗口中顯示調(diào)用程序所返回的數(shù)據(jù) 在 MIME類型 下拉式列表可以指定對提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用MIME編碼類型 5 將光標(biāo)插入到表單內(nèi) 輸入標(biāo)識提示文字 您的姓名 6 單擊 表單 選項中的 文本字段 按鈕 就會在表單中生成一個 文本字段 表單域 如圖17 3所示 圖17 3創(chuàng)建表單文本字段示意圖 7 單擊文本框表單域?qū)⑵溥x中 此時 文本字段 的 屬性 面板 如圖17 3所示 文本字段 的 屬性 面板各項屬性意義如下 在 文本域 文本框中輸入當(dāng)前表單域的名稱 系統(tǒng)將以此名稱保存文本框表單域中的內(nèi)容 在 字符寬度 文本框中輸入當(dāng)前表單域的寬度 即設(shè)置文本框中每行所允許輸入的字符數(shù)目 在 最大字符數(shù) 文本框中設(shè)置文本框表單域中最多可允許輸入的字符數(shù) 在 類型 區(qū)域中確定文本框的類型 3個單項選擇分別是單行 多行 密碼 在 初始值 文本框中輸入表單域的預(yù)先設(shè)置的值 在 換行 中設(shè)置多行文本框表單域的換行方式 當(dāng)選擇 類型 為多行單選項時 換行 下拉式列表就被激活 可選擇設(shè)置多行文本表單域中不同的換行方式 8 用同樣的方法在表單的下一行生成 您的E mail地址 的文本框表單域 如圖17 3所示 9 在 文本字段 的 屬性 面板中的 字符寬度 文本框中輸入45 并選中單行選項 表示此文本框為單行類型 17 2 2創(chuàng)建表單的單選按鈕和復(fù)選框單選按鈕和復(fù)選框是表單中用得較多的元素 而且是網(wǎng)頁設(shè)計者與瀏覽者進(jìn)行交流的最有效的手段 1 創(chuàng)建表單的單選按鈕網(wǎng)頁中表單的單選按鈕一般都是成組出現(xiàn)的 在頁面設(shè)計時既要為單選按鈕組定義一個標(biāo)識 也要為每一個單選按鈕定義一個標(biāo)識 創(chuàng)建單選按鈕的操作步驟如下 1 在表單的合適位置插入光標(biāo) 并輸入單選按鈕組的標(biāo)識文字 例如 性別 2 然后單擊 表單 選項中的按鈕 并輸入這個單選按鈕的標(biāo)識文字 例如 男 3 選中這個單選按鈕 打開單選按鈕的 屬性 面板 如圖17 4所示 圖17 4單選按鈕的 屬性 面板 4 在 單選按鈕 文本框中輸入單選按鈕的名字 性別 并在 選定值 文本框中給單選按鈕賦值 男 5 并為這個單選按鈕設(shè)置初始狀態(tài) 初始狀態(tài) 為 已勾選 狀態(tài) 6 用同樣的方法添加另一個標(biāo)識為 女 的單選按鈕 7 在 單選按鈕 文本框中輸入單選按鈕的名字 性別 并在選定值文本框中給單選按鈕賦值 女 8 并為這個單選按鈕設(shè)置初始狀態(tài) 初始狀態(tài) 為 未選中 狀態(tài) 如圖17 5所示 圖17 5表單的單選按鈕 2 創(chuàng)建表單的復(fù)選框網(wǎng)頁表單中的復(fù)選框可以單個出現(xiàn)也可以成組出現(xiàn) 單個復(fù)選框可用于答案為是或否的問題 成組的復(fù)選框可用于一個或多個選項選取的問題 一般情況下 復(fù)選框組的標(biāo)識文字放在復(fù)選框之前 而每一個復(fù)選框的標(biāo)識文字放到復(fù)選框的后面 當(dāng)一個復(fù)選框被選中后向服務(wù)器發(fā)送什么值是一件需要認(rèn)真思考的問題 服務(wù)器端必須有一個接收程序 如用CGI ASP PHP等編制的程序 用來接收表單發(fā)來的數(shù)據(jù) 并將這些數(shù)據(jù)處理后以網(wǎng)頁的形式發(fā)送給用戶端的瀏覽器 復(fù)選框名稱和選定值的設(shè)置應(yīng)該要按照服務(wù)器端接收程序的約定來完成 下面將介紹創(chuàng)建復(fù)選框的過程 其操作步驟如下 1 在表單的合適位置插入光標(biāo) 并輸入復(fù)選框組的標(biāo)識文字 例如 您經(jīng)常關(guān)注本網(wǎng)上書店的哪些欄目 2 將光標(biāo)插入到合適的位置 然后單擊 表單 選項中的按鈕 并輸入這個單選按鈕的標(biāo)識文字 如圖17 6所示 選中該復(fù)選框 在復(fù)選框的 屬性 面板中為其設(shè)置名稱和賦值 如圖17 7所示 圖17 6表單的復(fù)選框 圖17 7表單復(fù)選框的 屬性 面板 屬性 面板中各項參數(shù)意義如下所述 在 復(fù)選框名稱 文本框中 給選中的復(fù)選框起一個名字 也就是選中該復(fù)選框后向服務(wù)器發(fā)送信息時所用的變量名 在 選定值 文本框中 輸入選中該復(fù)選框后要向服務(wù)器發(fā)送的內(nèi)容在 初始狀態(tài) 中 選中 已勾選 單選項表示該復(fù)選框初始狀態(tài)已被選中 選中 未選中 單選項表示該復(fù)選框初始狀態(tài)為待選狀態(tài) 復(fù)選框 屬性 面板設(shè)置的參數(shù)應(yīng)按照與服務(wù)器端程序的約定來完成 17 2 3創(chuàng)建表單的列表框給表單添加列表框與下拉式列表框的方法基本相同 只需在創(chuàng)建了空白列表后 在列表 屬性 面板的 類型 中選擇不同的單選項便可完成設(shè)置 選擇 菜單 單選項 可創(chuàng)建下拉式列表框 選擇 列表 單選項 可創(chuàng)建列表框 下面來介紹創(chuàng)建表單的列表框方法 其操作步驟如下 1 在表單的合適位置上插入光標(biāo) 然后輸入下拉式列表的框的標(biāo)識文字 例如 您的職業(yè) 2 單擊 表單 選項中的按鈕 此時表單的光標(biāo)位置上顯示一個很小的下拉式列表框 3 選中新建的下拉式列表框 下拉列表框的 屬性 面板 如圖17 8所示 圖17 8下拉列表框的 屬性 面板 屬性 面板中各項參數(shù)的意義如下 在 列表 菜單 文本框中設(shè)置下拉式列表框的名稱 在此文本框中輸入下拉式列表框的名稱為select 在 類型 選項區(qū)中設(shè)置下拉式列表框的類型為 菜單 若下拉式列表框的 類型 設(shè)置為 列表 時 高度文本框被激活 在其中可設(shè)置該列表框可顯示的行數(shù) 選中 選定范圍 復(fù)選框 可將下拉式列表設(shè)置成一次選擇多個選項 可以通過按Ctrl鍵 再單擊選擇不相鄰的任意多個選項 也可以通過按Shift鍵來選中兩次單擊選項之間所有連續(xù)的選項 單擊 列表值 按鈕 可以進(jìn)行列表值的設(shè)置 在 初始化時選定 列表中 會顯示通過列表值設(shè)置的列表項目文字 4 在 屬性 面板中單擊 列表值 按鈕 打開 列表值 對話框 如圖17 9所示 5 單擊項目標(biāo)簽按鈕的下方 在出現(xiàn)的文本框中輸入 工人 6 按Tab鍵或單擊值按鈕 在出現(xiàn)的文本框中輸入選項的賦值 GR 7 單擊按鈕 重復(fù)步驟 5 6 添加新的列表選項 8 如果要刪除某個選項 可以在 列表值 對話框中選中該項 然后單擊按鈕即可 9 可用列表值對話框中按鈕調(diào)整下拉式列表的選項次序 10 單擊 確定 按鈕 此時列表項目顯示在 屬性 面板的 初始化時選定 列表窗口中 11 按F12鍵 在瀏覽器中單擊下拉列表框的按鈕 可以看到列表框的下拉菜單 圖17 9 列表值 對話框 17 2 4創(chuàng)建表單的提交和重置按鈕在網(wǎng)頁中的表單必須添加 提交 按鈕 才能將瀏覽者填寫的信息上傳到服務(wù)器 在Dreamweaver8另外還設(shè)置了一個用于清除表單中填寫數(shù)據(jù)的 重置 按鈕 幾乎所有網(wǎng)頁中的表單都包含 提交 和 重置 按鈕 在表單中創(chuàng)建 提交 和 重置 按鈕的操作步驟如下 1 在表單合適的位置上確定插入點 然后2次單擊 表單 選項卡中的按鈕 2 在表單中就會生成2個按鈕 如圖17 10所示 3 選中第一個按鈕 在按鈕的 屬性 面板中設(shè)置參數(shù) 輸入 按鈕名稱 為 Submit 在 標(biāo)簽 文本框中輸入該按鈕上的文字 提交 在 動作 選項區(qū)中選擇 提交表單 單選項 4 選中第二個按鈕 在按鈕的 屬性 面板中設(shè)置參數(shù) 輸入 按鈕名稱 為 Reset 在 標(biāo)簽 文本框中輸入該按鈕上的文字 重置 在 動作 選項區(qū)中選擇 重設(shè)表單 單選項 添加按鈕后的表單如圖17 10所示 圖17 10表單按鈕的 屬性 面板 17 2 5其它表單域的應(yīng)用1 表單的圖像域圖像域是一個比較有用的表單域 它的主體是一個圖片 在瀏覽時單擊這個圖片時 表單就會向服務(wù)器發(fā)送表單中各個表單域的值 圖像域可以代替 提交 按鈕 一個圖像域有兩個值 分別表示單擊圖像域時鼠標(biāo)指針的縱坐標(biāo)和橫坐標(biāo) 在表單中創(chuàng)建圖像域的操作步驟如下 1 在表單合適的位置上確定插入點 然后再單擊 表單 選項中的按鈕 2 在打開的 選擇圖像源 對話框中 選擇一個圖片將其插入到表單中 3 選中該圖像 在圖像的 屬性 面板中可以設(shè)置表單的圖像屬性 如圖17 11所示 設(shè)置方法同操作普通圖像類似 表單圖像域 屬性 面板的基本參數(shù)的意義如下 在 圖像區(qū)域 文本框中可輸入圖像域的名稱 在 源文件 文本框中輸入要選定圖像的路徑和文件名 在 替代 文本框中可輸入圖像的替換文字 當(dāng)瀏覽器不能顯示圖像時 輸入的文字將代替圖像 顯示在瀏覽器中 在 對齊 下拉式列表框中設(shè)置圖像的對齊方式 單擊 編輯圖像 按鈕 可以啟動外部圖像編輯器Fireworks8 編輯該圖像 圖17 11表單圖像域的 屬性 面板 2 表單的隱藏域隱藏域是一種在瀏覽器上看不到的表單域 也不用對其執(zhí)行操作 利用隱藏域可以實現(xiàn)瀏覽器同服務(wù)器在后臺交換信息 由于它是不可見的 所以也不需要為它添加標(biāo)識文字 在表單中 插入隱藏表單域的操作步驟如下 1 在表單合適的位置上確定插入點 然后再單擊 表單 選項中的按鈕 2 在網(wǎng)頁文檔窗口的插入點處可以看到一個圖標(biāo) 3 雙擊圖標(biāo) 選中表單的隱藏域 在表單隱藏域的 屬性 面板中可以設(shè)置表單隱藏域的屬性 如圖17 12所示 圖17 12表單隱藏域的 屬性 面板 隱藏表單域 屬性 面板的基本參數(shù)意義如下 在 隱藏區(qū)域 文本框中 輸入表單隱藏域的名稱 在 值 文本框中輸入隱藏表單域的初始值 3 表單的文件域利用表單的文件域可以從本地計算機(jī)向服務(wù)器上傳文件 表單的文件域包括一個文本框和一個瀏覽按鈕 在瀏覽器中單擊瀏覽按鈕 打開選擇文件的對話框 在對話框中選擇相應(yīng)的文件 然后單擊表單中的提交按鈕便可將文件發(fā)送到服務(wù)器上 在表單中 插入文件表單域的操作步驟如下 1 在表單合適的位置上確定插入點 然后再單擊 表單 選項中的按鈕 2 在網(wǎng)頁文檔窗口的插入點處可以創(chuàng)建一個文本框和瀏覽按鈕 如圖17 13所示 3 選中表單的文件域 在表單的文件域的 屬性 面板中可以設(shè)置表單文件域的屬性 文件表單域 屬性 面板的基本參數(shù)意義如下 圖17 13表單的文件域 在 文件域名稱 文本框中輸入文件表單域的名稱 在 字符寬度 文本框中輸入文件域最大字符寬度 在 最多字符數(shù) 文本框中輸入文件域最多字符數(shù) 4 按F12鍵預(yù)覽Web頁面 單擊 瀏覽 按鈕 系統(tǒng)彈出 選擇文件 對話框 瀏覽者可選擇確定本地計算機(jī)重要上傳的文件 完成文件上傳的操作 在Web頁面中若要插入表單的轉(zhuǎn)跳菜單 可單擊表單子面板的按鈕 17 3表單的應(yīng)用實例例17 1創(chuàng)建一個如圖17 14所示的信息反饋的表單 并根據(jù)輸入的數(shù)據(jù)類型設(shè)置表單域的驗證行為 使得當(dāng)在表單中輸入了無效數(shù)據(jù)后 遞交表單時會顯示錯誤提示信息 制作分析 本例是一個常規(guī)的表單網(wǎng)頁 制作時應(yīng)該注意所有表單元素都必須放在表單的紅色虛線框內(nèi) 對重要的數(shù)據(jù)區(qū)域可添加行為來驗證數(shù)據(jù)的正確性 操作步驟見教材341 342頁 圖17 14信息反饋的表單 17 4本章小結(jié)在本章中 主要介紹了網(wǎng)絡(luò)信息交互工具 表單 表單技術(shù)是建立動態(tài)網(wǎng)站的重要工具之一 利用表單技術(shù)能充分發(fā)揮網(wǎng)絡(luò)的有利條件 使信息能夠及時得到交互反饋 本章的重點知識有創(chuàng)建表單和表單的文本字段 文本區(qū)域 單選按鈕 復(fù)選框 下拉式列表框等多種表單域的方法 設(shè)置各種表單域?qū)傩苑椒?以及用E mail方式遞交表單等知識