第12講 表單和表單對象的設(shè)置及應(yīng)用

1、網(wǎng)頁設(shè)計(jì)教程網(wǎng)頁制作應(yīng)用教程網(wǎng)頁制作應(yīng)用教程2012.112012.11QQQQ：講師：徐儒講師：徐儒網(wǎng)頁設(shè)計(jì)教程上節(jié)回顧上節(jié)回顧2012年秋期計(jì)算機(jī)等級考試試題中網(wǎng)頁制作考題的講解 框架及其設(shè)置應(yīng)用實(shí)例：用框架制作一個(gè)導(dǎo)航菜單網(wǎng)頁設(shè)計(jì)教程表單創(chuàng)建和設(shè)置表單對象的添加和設(shè)置應(yīng)用實(shí)例：注冊表單本節(jié)講堂：本節(jié)講堂： 網(wǎng)頁設(shè)計(jì)教程1、表單的創(chuàng)建和設(shè)置、表單的創(chuàng)建和設(shè)置了解的知識點(diǎn)了解的知識點(diǎn) 創(chuàng)建表單 表單屬性設(shè)置網(wǎng)頁設(shè)計(jì)教程1.1、表單創(chuàng)建、表單創(chuàng)建 在Dreamweaver 8中，表單是用來輸入數(shù)據(jù)或與網(wǎng)站進(jìn)行交互的工具?？梢詫⒄麄€(gè)網(wǎng)頁創(chuàng)建成一個(gè)表單網(wǎng)頁，也可以在網(wǎng)頁的部分區(qū)域中添加表單，其創(chuàng)建

2、方法都相同。 網(wǎng)頁設(shè)計(jì)教程1.2、表單屬性設(shè)置、表單屬性設(shè)置 將插入點(diǎn)定位到插入的表單中，打開屬性面板可以對其屬性進(jìn)行設(shè)置。動作動作：提交表單的action動作處理頁面方法方法：POST：該方法通過將內(nèi)容附加在HTTP報(bào)文的body體內(nèi)，來傳遞數(shù)據(jù)。(安全) GET：該方法通過URL請求來傳遞數(shù)據(jù)。網(wǎng)頁設(shè)計(jì)教程2、表單對象的添加和設(shè)置、表單對象的添加和設(shè)置了解的知識點(diǎn)了解的知識點(diǎn) 認(rèn)識表單對象 添加表單對象 設(shè)置表單對象網(wǎng)頁設(shè)計(jì)教程常用對象常用對象：文本字段 、按鈕 、單選按鈕組、復(fù)選框、 跳轉(zhuǎn)菜單 、列表/菜單 非常用對象非常用對象：隱藏域、文件域、標(biāo)簽、字段集、文本區(qū)域 網(wǎng)頁設(shè)計(jì)教程 文本

3、字段是最常見的表單對象之一，可以輸入字母、數(shù)字、文本等類型的內(nèi)容。文本可以是單行或多行顯示，也可以以密碼的方式顯示，在這種情況下，輸入文本將被替換為星號或項(xiàng)目符號，以避免旁觀者看到這些文本，一般用作密碼等項(xiàng)目。 網(wǎng)頁設(shè)計(jì)教程主要屬性：主要屬性： 字符寬度：文本框顯示的寬度（單位：字符） 最多字符數(shù)：能夠接收的最大字符 類型：文本框顯示的類型樣式 初始值：默認(rèn)顯示的內(nèi)容網(wǎng)頁設(shè)計(jì)教程 在單擊時(shí)執(zhí)行操作。通常這些操作包括提交或重置表單并可以為按鈕添加自定義的名稱或標(biāo)簽。 主要屬性主要屬性 提交表單：提交Form的action動作 重置表單：將表單對象的內(nèi)容還原成初始值 無：不做任何操作網(wǎng)頁設(shè)計(jì)教程f

4、unction check()var str = document.getElementById(id1).value;/var str1 = document.form1.textfield.value;if(str = ) alert(文本框輸入不能為空！); else alert(你輸入的值為： + str); 文本框： 網(wǎng)頁設(shè)計(jì)教程網(wǎng)頁設(shè)計(jì)教程 在一組選項(xiàng)中只能選擇一個(gè)選項(xiàng)。如在性別單選按鈕組中選中了“男”單選按鈕，再選中“女”單選按鈕時(shí)， “男”單選按鈕就會被撤消。 若干單選按鈕，只要具有相同的name，就組成一組單選按鈕組。主要屬性：主要屬性： 選定值：單選按鈕對應(yīng)的選項(xiàng)值 初始狀

5、態(tài)：已勾選/未選中網(wǎng)頁設(shè)計(jì)教程function check() var str = document.getElementsByName(radiobutton);var strNew= ;for(var i=0;istr.length;i+) if(stri.checked = true) strNew = stri.getAttribute(value); if(strNew = ) alert(選項(xiàng)目不能為空); else alert(你選中的值為： + strNew); 網(wǎng)頁設(shè)計(jì)教程你的性別： 男 女 你的學(xué)習(xí)情況： 好 壞 網(wǎng)頁設(shè)計(jì)教程2.5、復(fù)選框、復(fù)選框 復(fù)選框的標(biāo)記是在選項(xiàng)前有

6、符號，其允許同時(shí)選擇多個(gè)選項(xiàng)。 主要屬性：主要屬性： 選定值：單選按鈕對應(yīng)的選項(xiàng)值 初始狀態(tài)：已勾選/未選中網(wǎng)頁設(shè)計(jì)教程function check() var arr = document.getElementsByTagName(INPUT);var strNew= ;for(var i=0;iarr.length;i+) if(arri.type = checkbox & arri.checked) strNew = strNew + arri.getAttribute(value) + “ ; if(strNew = ) alert(選項(xiàng)目不能為空); else alert(你選中的值

7、為： + strNew); 網(wǎng)頁設(shè)計(jì)教程你的興趣是： 讀書 唱歌 打球 購物 宅男宅女 網(wǎng)頁設(shè)計(jì)教程2.6、跳轉(zhuǎn)菜單、跳轉(zhuǎn)菜單 可跳轉(zhuǎn)的列表或彈出菜單，可以用它插入一種菜單，這種菜單中的每個(gè)選項(xiàng)都可以鏈接到某個(gè)文檔或文件。 主要屬性：主要屬性： 文本：菜單顯示的內(nèi)容 轉(zhuǎn)到URL:跳轉(zhuǎn)的鏈接地址網(wǎng)頁設(shè)計(jì)教程2.6、跳轉(zhuǎn)菜單、跳轉(zhuǎn)菜單網(wǎng)頁設(shè)計(jì)教程2.7、列表、列表/菜單菜單 “列表”指在一個(gè)下拉列表框中顯示一些選項(xiàng)，可以從其中選擇多個(gè)。“菜單”指在一個(gè)菜單中顯示一些選項(xiàng)值，用戶只能從中選擇單個(gè)選項(xiàng)。 主要屬性：主要屬性： 高度：列表顯示的高度； 選定范圍：允許多選/單選 列表值：列表值的集合網(wǎng)頁設(shè)計(jì)教程2.7、列表、列表/菜單菜單網(wǎng)頁設(shè)計(jì)教程3、框架的實(shí)例、框架的實(shí)例 實(shí)際案例:用表單及其元素制作一個(gè)注冊