第五章表單的應用

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

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

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

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

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

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

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

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

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

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