第７章　表單

教學(xué)課題：表單組件簡(jiǎn)介

教學(xué)目標(biāo)： １、掌握向網(wǎng)頁中插入文本域、按鈕、復(fù)選框、列表、單選按鈕等操作；

２、能對(duì)表單元素進(jìn)行靈活運(yùn)用；

３、能在網(wǎng)頁中對(duì)表單元素進(jìn)行布局；

４、能利用表單元素制作較為復(fù)雜的表單頁面。

教學(xué)重點(diǎn)：1、熟練掌握向網(wǎng)頁中設(shè)置文本編輯區(qū)域，插入按鈕、復(fù)選框、列表、單選按鈕的作用和用法；

          2、能夠在網(wǎng)頁中對(duì)表單元素進(jìn)行布局。

教學(xué)難點(diǎn)：掌握向網(wǎng)頁中插入文本域、按鈕、復(fù)選框、列表、單選按鈕等組件，并使頁面美觀。

教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。

教學(xué)課時(shí)：２節(jié)

教學(xué)過程：1、導(dǎo)入新課：略

          2、講解新課：

一、演示案例1：“用戶信息”頁面

【操作步驟】

步驟１：創(chuàng)建表單

(1) 啟動(dòng)Adobe Dreamweaver CS5，新建一個(gè)基本頁HTML文檔，輸入“用戶信息”文字，居中，文字大小設(shè)置成h2格式。

(2)按Shift+Enter組合鍵，光標(biāo)換到下一行，執(zhí)行“插入”→“表單”菜單命令，或者是打開常用工具箱中的“表單”面板，如圖7.14所示。

圖7.14 表單對(duì)象面板

(3) 單擊“表單”按鈕，出現(xiàn)如圖7.15所示的表單。

圖7.15 插入表單

步驟2：插入表單組件、設(shè)置組件名稱及輸入信息。

本案例的表單元素包括文本域、隱藏域、復(fù)選框、列表、文本域以及按鈕等。為了使表單中對(duì)象排版美觀，我們需要在表單中插入表格進(jìn)行排版。

• 選中表單，單擊“插入記錄”→“表格”，插入10行3列的表格。結(jié)果如圖7.16 所示。

圖7.16 在表單中插入表格

• 在表格第1列中輸入提示信息，在第3列中輸入填寫注意事項(xiàng)，將第８行中的兩個(gè)單元格合并；將第９、10行各合并成一個(gè)大單元格，如圖7.17 所示。然后將表格邊框顏色設(shè)為“#aaaaaa”，方法是切換到代碼頁面，在<table>標(biāo)簽中添加表格邊框顏色屬性值，如<table> bordercolor="#aaaaaa"</table>

圖7.17 在表格中輸入提示信息

• 在表格第2列中相關(guān)行分別插入文本字段，向服務(wù)器提供 “姓名”、“家庭住址”、“郵編”、“聯(lián)系電話”和“郵箱”等文字信息。
• 向表格第2列中的，第2行插入單選框，切換到代碼頁面把兩個(gè)單選按鈕代碼之間的<br />刪除，這樣就可以放在一行上了。操作界面如圖7.9所示；
• 向表格第2列中的，第7行插入選擇菜單，操作界面如圖7.11所示；
• 向表格第2列中的，第8行插入復(fù)選框，操作界面如圖7.8所示；
• 向表格第2列中的，第9行插入文字和文本區(qū)域，操作界面如圖7.5所示；
• 向表格第2列中的，第10行插入“提交”和“重置”按鈕，操作界面如圖7.13所示；。
• 最后設(shè)置表格為居中對(duì)齊。最后效果如圖7.18 所示。

圖7.18 “用戶信息”編輯效果圖

步驟3：插入提交表單按鈕并設(shè)置表單提交動(dòng)作。

表單需要通過Action屬性鏈接上可以在服務(wù)器端執(zhí)行的程序，這樣表單的交互作用才能實(shí)現(xiàn)。在Windows系統(tǒng)下可以用ASP來編制服務(wù)器端程序，實(shí)現(xiàn)起來比較簡(jiǎn)單。

需要說明的是表單中的action屬性和method屬性傳遞方式不同：

action屬性：當(dāng)用戶按確認(rèn)按鈕后，提交的內(nèi)容會(huì)被提交到其他文件進(jìn)行處理，這個(gè)action制定的值就是處理表單內(nèi)容的文件地址。

method屬性：用于向 action 的屬性值傳送數(shù)據(jù)的方法。默認(rèn)為 get，還有一個(gè)值是post。

這個(gè)知識(shí)點(diǎn)將在本書第11章詳細(xì)講到。

二、作業(yè)　練習(xí)案例1：客戶反饋表單

現(xiàn)在有一個(gè)三甲兒童玩具公司通過公司網(wǎng)站收集購(gòu)買客戶的反饋信息，以便總結(jié)提高企業(yè)在各個(gè)環(huán)節(jié)中存在的問題，及時(shí)調(diào)整，從而要把這個(gè)公司做大做強(qiáng)?？蛻舴答伇韱涡Ч鐖D7.19所示。

圖7.19“客戶反饋表單”編輯效果圖

教學(xué)課題： Spry 構(gòu)件驗(yàn)證表單

教學(xué)目標(biāo)： １、掌握通過 Spry 構(gòu)件驗(yàn)證表單數(shù)據(jù)的方法。

２、理解通過 Spry 構(gòu)件驗(yàn)證表單數(shù)據(jù)的含義。

教學(xué)重點(diǎn)：　掌握表單中Spry 驗(yàn)證文本域、Spry 驗(yàn)證復(fù)選框、Spry 驗(yàn)證選擇、Spry 驗(yàn)證文本區(qū)域等多種構(gòu)件的使用方法。

教學(xué)難點(diǎn)：通過Spry 構(gòu)件驗(yàn)證表單數(shù)據(jù)的方法。

教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。

教學(xué)課時(shí)：２節(jié)

教學(xué)過程：1、導(dǎo)入新課：略

          2、講解新課：

一、演示案例1：街舞新會(huì)員注冊(cè)。

【需求分析】：我們平時(shí)在某網(wǎng)站上進(jìn)行注冊(cè)時(shí)，常常會(huì)遇見輸入不正確報(bào)錯(cuò)且不允許登錄的情形。例如，您可以向訪問者鍵入電子郵件地址的表單中添加驗(yàn)證文本域構(gòu)件。如果訪問者無法在電子郵件地址中鍵入“@”符號(hào)和句點(diǎn)，驗(yàn)證文本域構(gòu)件會(huì)返回一條消息，聲明用戶輸入的信息無效。

【操作步驟】

步驟１：?jiǎn)?dòng)Adobe Dreamweaver CS5，新建一個(gè)基本頁HTML文檔，文件名為“街舞新會(huì)員注冊(cè).html”。

步驟２：執(zhí)行“插入”→“表單”菜單命令，或者是打開常用工具箱中的“表單”面板，添加表單。

步驟３：選中表單，然后執(zhí)行“插入記錄”→“表格”菜單命令，我們需要在表單中插入7行2列的表格，寬為269像素，填充1像素，間距1像素，居中對(duì)齊。表格屬性如圖7.32 所示。

圖7.32在表單中插入表格

步驟４：

將表格中第1、6、7行中的兩個(gè)單元格合并；在表格第1行中輸入“街舞新會(huì)員注冊(cè)”文字。在表格第2~5行的第列中輸入“注冊(cè)網(wǎng)名：”、“注冊(cè)密碼：”、“確認(rèn)密碼：”和“電子信箱：”提示信息文字。在表格第7行中輸入下面的提示文字：

步驟５：第2行第2列單擊 按鈕，插入Spry驗(yàn)證文本域，ID名為：UserName。然后鼠標(biāo)單擊藍(lán)色區(qū)域，會(huì)出現(xiàn)Spry驗(yàn)證文本域?qū)傩?，如圖7.33所示。“必需的”，“有效的”的預(yù)覽狀態(tài)。在“驗(yàn)證于”中勾選“OnChange”，在“最大字符數(shù)”中輸入“14”。

圖7.33插入Spry驗(yàn)證文本域

步驟６：第3行第2列單擊 按鈕，插入Spry驗(yàn)證密碼，ID名為： Password。然后鼠標(biāo)單擊藍(lán)色區(qū)域，會(huì)出現(xiàn)Spry驗(yàn)證文本域?qū)傩?，如圖7.34所示。“必需的”，“有效的”的預(yù)覽狀態(tài)。在“驗(yàn)證于”中勾選“OnChange”，在“最大字符數(shù)”中輸入“16”和“最小字符數(shù)”中輸入“10”。

圖7.34插入Spry驗(yàn)證密碼

步驟７：第4行第2列單擊 按鈕，插入Spry驗(yàn)證密碼，ID名為： Password1。方法同第6步。

步驟８：第5行第2列單擊 按鈕，插入Spry驗(yàn)證文本域，ID名為：email。然后鼠標(biāo)單擊藍(lán)色區(qū)域，會(huì)出現(xiàn)Spry驗(yàn)證文本域?qū)傩?，如圖7.35 所示。“必需的”，“有效的”的預(yù)覽狀態(tài)。在“類型”中選擇“電子郵件地址”，在“驗(yàn)證于”中勾選“OnChange”，在“最大字符數(shù)”中輸入“40”和“最小字符數(shù)”中輸入“20”。

圖7.35插入Spry驗(yàn)證文本域，驗(yàn)證電子郵件地址

步驟９：第6行插入兩個(gè)按鈕：第1個(gè)按鈕名：submit，值：完成注冊(cè)，動(dòng)作：提交表單；第2個(gè)按鈕名：reset，值：擦掉重填，動(dòng)作：重設(shè)表單。結(jié)果如圖7.36 所示。

圖7.36“街舞新會(huì)員注冊(cè)”編輯效果圖

步驟10：美觀修飾操作

• 選中整個(gè)表格，在<table>標(biāo)簽中添加表格背景色和字體大小屬性，如bgcolor="#CCCCFF"  fontsize="2"  。
• 選中表格的第一行，將背景色值設(shè)為：#60A8E5，行高：20；第一行中的文字顏色設(shè)為：#FFFFFF。
• 表格中其他行背景色值都設(shè)為：#FFFFEC。表格2~5行第1列對(duì)齊方式：水平右對(duì)齊；表格2~5行第2列對(duì)齊方式：水平左對(duì)齊。

步驟11：保存文件，按F12瀏覽時(shí)會(huì)出現(xiàn)Spry對(duì)象自動(dòng)生成的JS和CSS文件，如圖7.37所示的窗口，單擊確定。輸入信息后，確認(rèn)驗(yàn)證效果是否滿足題目要求。

圖7.37 Spry對(duì)象自動(dòng)生成的JS和CSS文件

二、作業(yè)　練習(xí)案例1：學(xué)生課外閱讀情況調(diào)查表

1、【需求分析】

課外閱讀既可以鞏固學(xué)生課內(nèi)閱讀的成果又可以擴(kuò)大閱讀領(lǐng)域，提高閱讀能力，鍛煉其思維，陶冶其品德，也是開拓學(xué)生視野、發(fā)展學(xué)生智力的重要途徑之一。我們關(guān)注中學(xué)生課外閱讀的現(xiàn)狀，設(shè)置了一個(gè)“課外閱讀情況調(diào)查問卷”網(wǎng)頁，從而能夠精確分析學(xué)生的課外閱讀情況。

圖7.38 “課外閱讀情況調(diào)查問卷”效果圖