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

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

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

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

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

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

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

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

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

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

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