高中信息技術(shù)第8章網(wǎng)頁表單的處理課件粵教版.ppt

表單是用于實現(xiàn)網(wǎng)頁瀏覽者與服務(wù)器之間信息交互的一種頁面元素 被廣泛用于各種信息的搜集和反饋 通過本章學(xué)習 應(yīng)該掌握以下內(nèi)容 認識網(wǎng)頁表單創(chuàng)建表單的方法編輯表單設(shè)置表單確認頁面 第8章網(wǎng)頁表單的處理 8 1利用FrontPage2002處理表單 8 1 1創(chuàng)建表單1 表單概述表單是用來收集瀏覽者的用戶名 密碼 E mail地址 個人愛好和聯(lián)系地址等用戶信息的輸入?yún)^(qū)域集合 FrontPage提供了文本框 文本區(qū) 單選按鈕 復(fù)選框 下拉框 提交按鈕和重置按鈕等豐富的表單域 1 文本框 文本框用來輸入比較簡單的信息 2 文本區(qū) 如果需要輸入建議 需求等大段文字 使用文本框就顯得力不從心了 這時通常使用帶有滾動條的文本區(qū) 3 單選按鈕 單選按鈕常用于表示唯一的選擇結(jié)果 4 復(fù)選框 復(fù)選框常用來表示許多項可以同時選中的事物 比如個人愛好 所學(xué)科目和選購的產(chǎn)品種類等 5 下拉列表框 當需要選擇職業(yè) 文化程度等事項時 除了文本區(qū)以外 還可以考慮使用下拉列表框 6 提交按鈕和重置按鈕 當用戶完成了表單的填寫后 如果需要提交數(shù)據(jù) 則可以單擊表單中的提交按鈕 如果希望恢復(fù)表單為填寫前的狀態(tài) 以便重新填寫 則可以單擊重置按鈕 2 創(chuàng)建表單在FrontPage2002中可以通過應(yīng)用向?qū)?chuàng)建表單 也可以自己手動創(chuàng)建表單 8 1 2編輯表單1 修改表單 1 刪除不必要的域如果是手動創(chuàng)建的表單 刪除不必要的域的方法很簡單 只需將選中需要刪除的域 單擊Delete鍵即可 如果是用表單向?qū)?chuàng)建的表單 將鼠標指針移至要刪除的行的左側(cè) 當鼠標變成指向箭頭 時 選擇要刪除的域 然后單擊鼠標右鍵 從彈出的快捷菜單中選擇 刪除單元格 命令即可 2 修改文本框的寬度在FrontPage2002中修改文本框的寬度有以下兩種方法 鼠標拖動法用鼠標選中要修改文本框 選中狀態(tài)下的文本框被6個小方框包圍起來 拖動其中的小方框就可以改變文本框的寬度 精確設(shè)置法用鼠標選中要修改文本框 然后單擊右鍵 從彈出的快捷菜單中選擇 表單域?qū)傩?命令 彈出 文本框?qū)傩?對話框 在 寬度 文本框中輸入精確數(shù)值 然后單擊 確定 按鈕 3 修改域標題在表單中修改域標題也很容易 只要用鼠標選中要更改的域標題 然后直接輸入所需的域標題即可 2 設(shè)置表單的背景顏色3 設(shè)置光標順序在填寫表單時 使用鍵盤上的 Tab 鍵 就可以在各項之間進行切換 Tab 鍵順序是在各屬性對話框中設(shè)置的 4 設(shè)置密碼域?qū)傩栽谔顚懕韱螘r 填寫的某些內(nèi)容會以 表示 這是為了防止輸入的某些重要內(nèi)容被其他人偷看 要想為標單加上此功能 只要在 文本框?qū)傩?對話框里的 密碼域 選項組中選擇 是 按鈕即可 8 1 3保存表單結(jié)果訪問者填寫完表單內(nèi)容后發(fā)送出去 發(fā)送后的表單結(jié)果要存放在某一位置 表單結(jié)果存放的位置是由表單屬性指定的 8 1 4設(shè)置表單確認頁面在測試表單時 單擊 注冊 按鈕后 瀏覽器會自動調(diào)出一個確認表單頁面 其提示信息均為英文 表單的確認頁面也可以自己設(shè)置 在瀏覽時讓瀏覽器將自設(shè)的確認頁面調(diào)出 1 制作確認表單2 鏈接確認表單與表單頁面 8 2處理網(wǎng)頁表單的其他方法8 2 1利用HTML處理表單利用HTML也可以創(chuàng)建表單 這樣創(chuàng)建的表單通常由兩類元素構(gòu)成 一是普通的頁面元素 例如表格 圖像 文字等 二是用于接收信息的特定頁面元素 也就是所謂的表單控件 1 表單標記符HTML中表單標記符為FORM 其主要作用是設(shè)定表單的起止位置 并指定處理表單數(shù)據(jù)程序的URL地址 2 表單輸入標記符INPUT是表單輸入標記符 在表單創(chuàng)建中使用頻繁 大部分表單內(nèi)容需要用到此標記符 3 控件定義方法 1 文本框和口令框創(chuàng)建單行文本框的基本語法如下 2 復(fù)選框與單選按鈕創(chuàng)建復(fù)選框和單選框也是使用INPUT標記符 語法分別如下 3 按鈕創(chuàng)建提交按鈕 重置按鈕和自定義按鈕的語法分別如下 4 多行文本框 文本區(qū) 利用HTML創(chuàng)建多行文本框應(yīng)使用TEXTAREA標記符 其使用格式如下 默認多行文本 5 選項菜單要創(chuàng)建選項菜單應(yīng)使用SELECT標記符 并將每個可獨立選取的項用一個OPTION標記符標出來 8 2 2利用Dreamweaver4 0處理表單Dreamweaver4 0提供了大量的表單元素 將 Object 面板切換到 Forms 類下 即可看到各種表單元素 1 插入文本框 1 創(chuàng)建空白表單 2 插入文本框 插入單行文本框 插入多行文本框 插入密碼文本框2 設(shè)置文本框?qū)傩? 插入單選按鈕 1 插入單選按鈕 2 設(shè)置單選按鈕的屬性4 插入復(fù)選框 1 插入復(fù)選框