高中信息技術第8章網頁表單的處理課件粵教版課件

1、高中信息技術第8章網頁表單的處理課件粵教版 表單是用于實現(xiàn)網頁瀏覽者與服務表單是用于實現(xiàn)網頁瀏覽者與服務器之間信息交互的一種頁面元素，被廣器之間信息交互的一種頁面元素，被廣泛用于各種信息的搜集和反饋。通過本泛用于各種信息的搜集和反饋。通過本章學習，應該掌握以下內容：章學習，應該掌握以下內容： 認識網頁表單認識網頁表單 創(chuàng)建表單的方法創(chuàng)建表單的方法 編輯表單編輯表單 設置表單確認頁面設置表單確認頁面 第第8章章 網頁表單的處理網頁表單的處理 高中信息技術第8章網頁表單的處理課件粵教版8.1 利用利用FrontPage 2002處理表單處理表單 8.1.1 創(chuàng)建表單創(chuàng)建表單 1 . 表單概述表單概

2、述 表單是用來收集瀏覽者的用戶名、密碼、表單是用來收集瀏覽者的用戶名、密碼、E-mail地址、個人愛地址、個人愛好和聯(lián)系地址等用戶信息的輸入?yún)^(qū)域集合。好和聯(lián)系地址等用戶信息的輸入?yún)^(qū)域集合。 FrontPage提供了文本框、文本區(qū)、單選按鈕、復選框、下拉框提供了文本框、文本區(qū)、單選按鈕、復選框、下拉框、提交按鈕和重置按鈕等豐富的表單域。、提交按鈕和重置按鈕等豐富的表單域。（1）文本框）文本框：文本框用來輸入比較簡單的信息文本框用來輸入比較簡單的信息 。 （2）文本區(qū)）文本區(qū)：如果需要輸入建議、需求等大段文字，使用文本框如果需要輸入建議、需求等大段文字，使用文本框就顯得力不從心了，這時通常使用帶有

3、滾動條的文本區(qū)。就顯得力不從心了，這時通常使用帶有滾動條的文本區(qū)。 （3）單選按鈕）單選按鈕：單選按鈕常用于表示唯一的選擇結果。單選按鈕常用于表示唯一的選擇結果。 （4）復選框）復選框：復選框常用來表示許多項可以同時選中的事物，比復選框常用來表示許多項可以同時選中的事物，比如個人愛好、所學科目和選購的產品種類等。如個人愛好、所學科目和選購的產品種類等。 高中信息技術第8章網頁表單的處理課件粵教版（5）下拉列表框）下拉列表框：當需要選擇職業(yè)、文化程度等事項時，除了文本當需要選擇職業(yè)、文化程度等事項時，除了文本區(qū)以外，還可以考慮使用下拉列表框。區(qū)以外，還可以考慮使用下拉列表框。 （6）提交按鈕和重

4、置按鈕）提交按鈕和重置按鈕：當用戶完成了表單的填寫后，如果需要當用戶完成了表單的填寫后，如果需要提交數(shù)據(jù)，則可以單擊表單中的提交按鈕。如果希望恢復表單為提交數(shù)據(jù)，則可以單擊表單中的提交按鈕。如果希望恢復表單為填寫前的狀態(tài)，以便重新填寫，則可以單擊重置按鈕。填寫前的狀態(tài)，以便重新填寫，則可以單擊重置按鈕。2創(chuàng)建表單創(chuàng)建表單 在在FrontPage 2002中可以通過應用向導創(chuàng)建表單，也可以中可以通過應用向導創(chuàng)建表單，也可以自己手動創(chuàng)建表單。自己手動創(chuàng)建表單。 8.1.2 編輯表單編輯表單1修改表單修改表單（1）刪除不必要的域）刪除不必要的域 如果是手動創(chuàng)建的表單，刪除不必要的域的方法很簡單，只需

5、如果是手動創(chuàng)建的表單，刪除不必要的域的方法很簡單，只需將選中需要刪除的域，單擊將選中需要刪除的域，單擊Delete鍵即可。如果是用表單向導創(chuàng)鍵即可。如果是用表單向導創(chuàng)建的表單，將鼠標指針移至要刪除的行的左側，當鼠標變成指向建的表單，將鼠標指針移至要刪除的行的左側，當鼠標變成指向箭頭箭頭時，選擇要刪除的域，然后單擊鼠標右鍵，從彈出的快捷時，選擇要刪除的域，然后單擊鼠標右鍵，從彈出的快捷菜單中選擇菜單中選擇“刪除單元格刪除單元格”命令即可。命令即可。高中信息技術第8章網頁表單的處理課件粵教版（2）修改文本框的寬度）修改文本框的寬度 在在FrontPage 2002中修改文本框的寬度有以下兩種方法：

6、中修改文本框的寬度有以下兩種方法： 鼠標拖動法鼠標拖動法 用鼠標選中要修改文本框，選中狀態(tài)下的文本框被用鼠標選中要修改文本框，選中狀態(tài)下的文本框被6個小方框個小方框包圍起來，拖動其中的小方框就可以改變文本框的寬度。包圍起來，拖動其中的小方框就可以改變文本框的寬度。 精確設置法精確設置法 用鼠標選中要修改文本框，然后單擊右鍵，從彈出的快捷菜單用鼠標選中要修改文本框，然后單擊右鍵，從彈出的快捷菜單中選擇中選擇“表單域屬性表單域屬性”命令，彈出命令，彈出“文本框屬性文本框屬性”對話框，在對話框，在“寬度寬度”文本框中輸入精確數(shù)值，然后單擊文本框中輸入精確數(shù)值，然后單擊“確定確定”按鈕。按鈕。（3）修

7、改域標題）修改域標題 在表單中修改域標題也很容易，只要用鼠標選中要更改的域標在表單中修改域標題也很容易，只要用鼠標選中要更改的域標題，然后直接輸入所需的域標題即可。題，然后直接輸入所需的域標題即可。2設置表單的背景顏色設置表單的背景顏色3設置光標順序設置光標順序 在填寫表單時，使用鍵盤上的在填寫表單時，使用鍵盤上的“Tab”鍵，就可以在各項之間進鍵，就可以在各項之間進行切換。行切換。 “Tab”鍵順序是在各屬性對話框中設置的。鍵順序是在各屬性對話框中設置的。 高中信息技術第8章網頁表單的處理課件粵教版 4設置密碼域屬性設置密碼域屬性 在填寫表單時，填寫的某些內容會以在填寫表單時，填寫的某些內容

8、會以“*”表示，這是為了防止表示，這是為了防止輸入的某些重要內容被其他人偷看。要想為標單加上此功能，只輸入的某些重要內容被其他人偷看。要想為標單加上此功能，只要在要在“文本框屬性文本框屬性”對話框里的對話框里的“密碼域密碼域”選項組中選擇選項組中選擇“是是”按鈕即可。按鈕即可。8.1.3保存表單結果保存表單結果 訪問者填寫完表單內容后發(fā)送出去，發(fā)送后的表單結果要存放訪問者填寫完表單內容后發(fā)送出去，發(fā)送后的表單結果要存放在某一位置。表單結果存放的位置是由表單屬性指定的在某一位置。表單結果存放的位置是由表單屬性指定的 。8.1.4設置表單確認頁面設置表單確認頁面 在測試表單時，單擊在測試表單時，單

9、擊“注冊注冊”按鈕后，瀏覽器會自動調出一個按鈕后，瀏覽器會自動調出一個確認表單頁面，其提示信息均為英文。表單的確認頁面也可以自確認表單頁面，其提示信息均為英文。表單的確認頁面也可以自己設置，在瀏覽時讓瀏覽器將自設的確認頁面調出。己設置，在瀏覽時讓瀏覽器將自設的確認頁面調出。1制作確認表單制作確認表單2鏈接確認表單與表單頁面鏈接確認表單與表單頁面高中信息技術第8章網頁表單的處理課件粵教版8.2 處理網頁表單的其他方法處理網頁表單的其他方法8.2.1 利用利用HTML處理表單處理表單 利用利用HTML也可以創(chuàng)建表單，這樣創(chuàng)建的表單通常由兩類元素構也可以創(chuàng)建表單，這樣創(chuàng)建的表單通常由兩類元素構成，一

10、是普通的頁面元素，例如表格、圖像、文字等，二是用于接成，一是普通的頁面元素，例如表格、圖像、文字等，二是用于接收信息的特定頁面元素，也就是所謂的表單控件。收信息的特定頁面元素，也就是所謂的表單控件。 1表單標記符表單標記符 HTML中表單標記符為中表單標記符為FORM，其主要作用是設定表單的起止位，其主要作用是設定表單的起止位置，并指定處理表單數(shù)據(jù)程序的置，并指定處理表單數(shù)據(jù)程序的URL地址。地址。 2表單輸入標記符表單輸入標記符 INPUT是表單輸入標記符，在表單創(chuàng)建中使用頻繁，大部分表單是表單輸入標記符，在表單創(chuàng)建中使用頻繁，大部分表單內容需要用到此標記符。內容需要用到此標記符。 3控件定

11、義方法控件定義方法（1）文本框和口令框）文本框和口令框 創(chuàng)建單行文本框的基本語法如下：創(chuàng)建單行文本框的基本語法如下：高中信息技術第8章網頁表單的處理課件粵教版（2）復選框與單選按鈕）復選框與單選按鈕 創(chuàng)建復選框和單選框也是使用創(chuàng)建復選框和單選框也是使用INPUT標記符，語法分別如下：標記符，語法分別如下：（3）按鈕）按鈕 創(chuàng)建提交按鈕、重置按鈕和自定義按鈕的語法分別如下：創(chuàng)建提交按鈕、重置按鈕和自定義按鈕的語法分別如下：（4）多行文本框（文本區(qū)）多行文本框（文本區(qū)） 利用利用HTML創(chuàng)建多行文本框應使用創(chuàng)建多行文本框應使用TEXTAREA標記符，其使用標記符，其使用格式如下：格式如下：默認多行

12、文本默認多行文本（5）選項菜單）選項菜單 要創(chuàng)建選項菜單應使用要創(chuàng)建選項菜單應使用SELECT標記符，并將每個可獨立選標記符，并將每個可獨立選取的項用一個取的項用一個OPTION標記符標出來。標記符標出來。 高中信息技術第8章網頁表單的處理課件粵教版8.2.2 利用利用Dreamweaver 4.0處理表單處理表單 Dreamweaver 4.0提供了大量的表單元素。將提供了大量的表單元素。將“Object”面板面板切換到切換到“Forms”類下，即可看到各種表單元素類下，即可看到各種表單元素 。1插入文本框插入文本框（1）創(chuàng)建空白表單）創(chuàng)建空白表單（2）插入文本框）插入文本框 插入單行文本框插入單行文本框 插入多行文本框插入多行文本框 插入密碼文本框插入密碼文本框2設置文本框屬性設置文本框屬性3插入單選按鈕插入單選按鈕（1）插入單選按鈕）插入單選按鈕（2）設置單選按鈕的屬性）設置單選按鈕的屬性4插入復選框插入復選框