第12講 表單和表單對象的設置及應用

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

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

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

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

5、態(tài)：已勾選/未選中網(wǎng)頁設計教程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(選項目不能為空); else alert(你選中的值為： + strNew); 網(wǎng)頁設計教程你的性別： 男 女 你的學習情況： 好 壞 網(wǎng)頁設計教程2.5、復選框、復選框 復選框的標記是在選項前有

6、符號，其允許同時選擇多個選項。 主要屬性：主要屬性： 選定值：單選按鈕對應的選項值 初始狀態(tài)：已勾選/未選中網(wǎng)頁設計教程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(選項目不能為空); else alert(你選中的值

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