第五章表單的應(yīng)用

1、第五章表單的應(yīng)用表單和表單對象創(chuàng)建表單插入表單對象Spry類表單對象表單和表單對象的應(yīng)用掌握使用表單對象設(shè)計網(wǎng)頁界面掌握使用Spry類表單對象設(shè)計網(wǎng)頁界面 一個網(wǎng)站不僅需要各種供用戶瀏覽的網(wǎng)頁，而且還需要與用戶進行交互的表單。表單是實現(xiàn)用戶調(diào)查、產(chǎn)品訂單和對象搜索設(shè)置等功能的重要手段。利用表單處理程序，可以收集、分析用戶的反饋意見，做出科學(xué)的、合理的決策。 通常，一個表單中包含多個對象，這些對象有時也稱為控件或表單元素，如用于輸入文本的文本域、用于發(fā)送命令的按鈕、用于選擇項目的單選按鈕和復(fù)選框以及用于顯示列表項的列表框等。 表單實現(xiàn)了瀏覽器和服務(wù)器之間的信息傳遞，它使網(wǎng)頁由單向瀏覽變成了雙向交

2、互。 表單（Form）是一種結(jié)構(gòu)化的文件，用于收集用戶信息，并將其提交到服務(wù)器，從而實現(xiàn)與用戶的交互。 一個完整的表單應(yīng)該包含兩個部分：一是在網(wǎng)頁中進行描述的表單對象；二是應(yīng)用程序，它可以是服務(wù)器端的，也可以是客戶端的，用于對客戶信息進行分析處理。瀏覽器處理表單的過程一般是這樣的：用戶在表單輸入數(shù)據(jù)，然后提交表單，瀏覽器根據(jù)表單體中的設(shè)置處理用戶輸入的數(shù)據(jù)。若表單指定通過服務(wù)器端的腳步程序進行處理，則該程序處理完畢后將結(jié)果反饋給瀏覽器；若表單指定通過客戶端的腳本程序處理，則處理完后也會將結(jié)果反饋給用戶。表單對象 頁面處于“設(shè)計”視圖，將插入點放在希望表單出現(xiàn)的位置，插入表單執(zhí)行下列操作之一：

3、在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“表單”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“表單”按鈕 。 一個表單插入到網(wǎng)頁中后，在編輯窗口中顯示為一個紅色虛線框，其他的表單對象必須放入這個框內(nèi)才能起作用。如果看不見到頁面中的此輪廓線。請檢查是否選中了“查看”“可視化助理”“不可見元素”。設(shè)置表單屬性設(shè)置表單屬性 將鼠標(biāo)指針置于表單的輪廓線上單擊選中表單，即可看到表單的“屬性”面板表單“屬性”面板5.4.1插入文本字段操作步驟如下： 頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一： 在Dreamweaver CS4主窗口中

4、，單擊菜單“插入”“表單”“文本域”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“文本字段”按鈕 。 將彈出“輸入標(biāo)簽輔助功能屬性”對話框 單擊“確定”按鈕，在表單的光標(biāo)位置插入一個 文本域。頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一： 在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“文本區(qū)域”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“文本區(qū)域”按鈕 。 彈出“輸入標(biāo)簽輔助功能屬性”對話框，單擊“確定”按鈕，在表單的光標(biāo)位置插入一個 文本區(qū)域。 操作步驟如下： （1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入

5、位置，插入表單執(zhí)行下列操作之一：在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“復(fù)選框組”。在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“復(fù)選框組”按鈕 。 （2）彈出“復(fù)選框組”對話框，如圖5-11所示，在對話框，可以按 增加復(fù)選框或按 減少復(fù)選框，按 移動復(fù)選框的位置。復(fù)選框的“值”（即“屬性”面板中的“選定值”）用來設(shè)置在該復(fù)選框被選中時發(fā)送給服務(wù)器的。 （3）單擊“確定”按鈕，在表單的光標(biāo)位置插入一個復(fù)選框組，包括兩個復(fù)選框， “復(fù)選框組”對話框操作步驟如下：（1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一：在Dreamwe

6、aver CS4主窗口中，單擊菜單“插入”“表單”“單選按鈕組”。在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“單選按鈕組”按鈕 。 （2）彈出“單選按鈕組”對話框，對話框，可以按 增加單選按鈕或按 減少單選按鈕，按 按鈕可以調(diào)整單選按鈕的排列順序。單選按鈕的“值”（即“屬性”面板中的“選定值”）用來設(shè)置在該單選按鈕被選中時發(fā)送給服務(wù)器的值。 （3）單擊“確定”按鈕，在表單的光標(biāo)位置插入一個單選按鈕組，包括兩個單選按鈕.操作步驟如下： （1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一：在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“

7、列表/菜單”。在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“列表/菜單”按鈕 。 （2）將彈出“輸入標(biāo)簽輔助功能屬性”對話框，單擊“確定”按鈕，在表單的光標(biāo)位置插入一個列表/菜單。操作步驟如下：（1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一： 在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“跳轉(zhuǎn)菜單”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“跳轉(zhuǎn)菜單”按鈕 。這時彈出“插入跳轉(zhuǎn)菜單”對話框， （2）單擊“確定”按鈕，插入跳轉(zhuǎn)菜單操作步驟如下：（1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列

8、操作之一： 在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“圖像域”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“圖像域”按鈕 。（2）在彈出的“選擇圖像源文件”對話框中選擇要作為按鈕的圖像.（3）單擊“確定”按鈕，插入圖像域，操作步驟如下： （1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一： 在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“文件域”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“文件域”按鈕 。 （2）將彈出“輸入標(biāo)簽輔助功能屬性”對話框，單擊“確定”按鈕，在表單的光標(biāo)位置插入一

9、個文件域。操作步驟如下： （1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一： 在Dreamweaver CS4主窗口中，單擊菜單“插入”“表單”“按鈕”。 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的“按鈕”按鈕 。 （2）將彈出“輸入標(biāo)簽輔助功能屬性”對話框，單擊“確定”按鈕，在表單的光標(biāo)位置插入一個按鈕。 Spry 框架是一個 JavaScript 庫，Web 設(shè)計人員使用它可以構(gòu)建能夠向站點訪問者提供更豐富體驗的 Web 頁。有了 Spry，就可以使用 HTML、CSS 和極少量的 JavaScript 將 XML 數(shù)據(jù)合并到 HTML 文檔中，

10、創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜單欄），向各種頁面元素中添加不同種類的效果。在設(shè)計上，Spry 框架的標(biāo)記非常簡單且便于那些具有 HTML、CSS 和 JavaScript 基礎(chǔ)知識的用戶使用。 Spry 構(gòu)件 是一個頁面元素，通過啟用用戶交互來提供更豐富的用戶體驗。Spry 構(gòu)件由以下幾個部分組成： 構(gòu)件結(jié)構(gòu)用來定義構(gòu)件結(jié)構(gòu)組成的 HTML 代碼塊。 構(gòu)件行為用來控制構(gòu)件如何響應(yīng)用戶啟動事件的 JavaScript。 構(gòu)件樣式用來指定構(gòu)件外觀的 CSS。 Spry類表單對象共有七種，它們分別是： Spry驗證文本域。 Spry驗證文本區(qū)域。 Spry驗證復(fù)選框。 Spry驗證選擇。 Spry驗證密碼。 Spry驗證確認 Spry驗證單選按鈕組。 插入Spry類表單對象的步驟和其他表單對象相似，具體如下：（1）頁面處于“設(shè)計”視圖，將插入點放在表單中插入位置，插入表單執(zhí)行下列操作之一： 在“插入”工具欄中選擇“表單”類別，然后單擊工具欄中的Spry類表單對象，在藍色矩形框內(nèi)的按鈕對象 在Dreamweaver CS4主窗口中，單擊菜單“插入”“表