第九章 交互式表單

1、組長：繆艷齊組員：司家月 胥蕙濤 楊平 吳佩9.1 表單的基礎(chǔ)知識表單的基礎(chǔ)知識9.2 插入文本域表單對象插入文本域表單對象9.3 插入表單按鈕對象插入表單按鈕對象9.4 插入列表和菜單表單對象插入列表和菜單表單對象9.5 檢查表單檢查表單表單一般被設(shè)置在一個HTML文檔中，訪問者填寫相關(guān)信息后提交表單，表單內(nèi)容會自動從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的ASP或CGI等程序處理后，再將訪問者所需的信息傳送到客戶端的瀏覽器上。表單用表單用標(biāo)記來創(chuàng)建的，在標(biāo)記來創(chuàng)建的，在標(biāo)記之間的部分都屬于表單的內(nèi)標(biāo)記之間的部分都屬于表單的內(nèi)容。容。標(biāo)記具有標(biāo)記具有action、method和和targ

2、et屬性。屬性。 處理程序的程序名，例如,如果屬性是空值，則當(dāng)前文檔的URL將被使用，當(dāng)提交表單時，服務(wù)器將執(zhí)行程序。定義處理程序從表單中獲得信息的方式，可以選擇GET或POST中的一個。GET方式是處理程序從當(dāng)前HTML文檔中獲取數(shù)據(jù)，這種傳送的數(shù)據(jù)量是有限制的。POST方式是當(dāng)前HTML文檔把數(shù)據(jù)傳送給處理程序。指定目標(biāo)窗口或幀?？梢赃x擇當(dāng)前窗口_self、父級窗口_parent、頂層窗口_top和空白窗口_blank。要在網(wǎng)頁文檔中插入表單對象，可以單【插入】工具欄要在網(wǎng)頁文檔中插入表單對象，可以單【插入】工具欄上的【表單】選項卡，打開【表單】插入欄。單擊相應(yīng)上的【表單】選項卡，打開【表

3、單】插入欄。單擊相應(yīng)的表單對象按鈕。的表單對象按鈕。9.1 表單的基礎(chǔ)知識表單的基礎(chǔ)知識9.2 插入文本域表單對象插入文本域表單對象9.3 插入表單按鈕對象插入表單按鈕對象9.4 插入列表和菜單表單對象插入列表和菜單表單對象9.5 檢查表單檢查表單 1.插入單行文本域選擇【插入】|【表單】|【文本字段】命令，或單擊【表單】插入欄上【文本字段】 按鈕，打開【輸入標(biāo)簽輔助功能屬性】對話框。單擊該對話框中的【確定按鈕】，即可在文檔中創(chuàng)建一個單行文本字段。選中插入的單行文本字段，打開【屬性】面板?！疚谋居颉课谋究颍嚎梢暂敗疚谋居颉课谋究颍嚎梢暂斎胛谋居虻拿Q入文本域的名稱【字符寬度】文本框：可以【字符

4、寬度】文本框：可以輸入文本域中允許顯示的字輸入文本域中允許顯示的字符數(shù)目符數(shù)目【最多字符數(shù)】文本框：用【最多字符數(shù)】文本框：用于輸入文本域中允許輸入的于輸入文本域中允許輸入的最大字符數(shù)目，這個值將定最大字符數(shù)目，這個值將定義文本域的大小限制，并用義文本域的大小限制，并用于驗證表單。于驗證表單?！境跏贾怠课谋究颍河糜谳敗境跏贾怠课谋究颍河糜谳斎胛谋居蛑心J(rèn)狀態(tài)下顯示入文本域中默認(rèn)狀態(tài)下顯示的文本。的文本?！绢悺肯吕斜砜?；指定用【類】下拉列表框；指定用于該表單的于該表單的CSSCSS樣式樣式2. 插入多行文本域在插入單行文本域后，選中【屬性】面板中的【多行】單選按鈕，在插入單行文本域后，選中【屬

5、性】面板中的【多行】單選按鈕，即可插入多行文本域。即可插入多行文本域。插入多行文本域后，可以再【屬性】面板的【字符寬度】文本框中插入多行文本域后，可以再【屬性】面板的【字符寬度】文本框中輸入文本框字符寬度大小數(shù)值；在【行數(shù)】文本框中可以輸入多行輸入文本框字符寬度大小數(shù)值；在【行數(shù)】文本框中可以輸入多行文本框行數(shù)，在【初始值】文本框中可以輸入文本框初始內(nèi)容。文本框行數(shù)，在【初始值】文本框中可以輸入文本框初始內(nèi)容。3.插入密碼文本域插入單行文本域后，選中【屬性】面板中的【密碼】插入單行文本域后，選中【屬性】面板中的【密碼】單選按鈕，即可插入密碼文本域。單選按鈕，即可插入密碼文本域。插入密碼文本域后

6、，在瀏覽器中預(yù)覽網(wǎng)頁文檔時，插入密碼文本域后，在瀏覽器中預(yù)覽網(wǎng)頁文檔時，輸入的文本以輸入的文本以*代替代替單擊【表單】插入欄上的【隱藏域】按鈕 ，即可在文檔中創(chuàng)建一個隱藏域。選擇隱藏域，打開【屬性面板】。在隱藏于【屬性】面板中，可輸入隱藏域的名稱。在【值】文本框中，可輸入隱藏域的初始值。選擇【插入】|【表單】|【文件域】命令，或單擊【表單】插入欄中的【文件域】按鈕 ，即可在文檔中創(chuàng)建一個文件上傳域。選中插件文件上傳域，打開【屬性】面板。【文件域名稱】文本框：用于輸入文件域的名稱【最多字符數(shù)】文本框：用于輸入文件域的文本框中允許輸入的最大字符數(shù)【類】下拉列表框：用于指定該表單的CSS樣式9.1

7、表單的基礎(chǔ)知識表單的基礎(chǔ)知識9.2 插入文本域表單對象插入文本域表單對象9.3 插入表單按鈕對象插入表單按鈕對象9.4 插入列表和菜單表單對象插入列表和菜單表單對象9.5 檢查表單檢查表單 按鈕表單對象包括按鈕、單選按鈕、單選按鈕組、復(fù)選框和復(fù)選框組。按鈕表單對象主要用于控制對表單的操作1.按鈕表單對象作用。在預(yù)覽網(wǎng)頁文檔時，當(dāng)輸入完表單數(shù)據(jù)后，可以單擊表單按鈕，提交服務(wù)器處理；如果對輸入的數(shù)據(jù)不滿意，需要重新設(shè)置時，可以單擊表單按鈕，重新輸入。復(fù)選框和單選按鈕是預(yù)定義選擇對象的表單對象?？梢栽僖唤M復(fù)選框中選擇多個選項；單擊表單按鈕也可以組成一個組使用，提供相互排斥的選項值，在單選按鈕組內(nèi)只能

8、選擇一個選項。2.插入表單按鈕表單按鈕是標(biāo)準(zhǔn)的瀏覽器默認(rèn)按鈕樣式，它包含需要顯示的文本，它包括【提交】和【重置】按鈕。選擇【插入】|【表單】|【按鈕】命令，打開【輸入標(biāo)簽輔助功能屬性】對話框，單擊【確定】按鈕，即可在文檔中創(chuàng)建一個表單按鈕。高手點撥：插入的按鈕表單對象，默認(rèn)的是【提交】按鈕，可以在【屬性面板中修改。此外，選中按鈕，可以拖動縮放按鈕大小。選中一個按鈕表單，打開【屬性】面板3.插入單選按鈕單選按鈕提供相互排斥的選項值，在單選按鈕組內(nèi)只能選擇一個選項。選擇【插入】|【表單】|【單選按鈕】命令，即可在文檔中創(chuàng)建一個單選按鈕。選中單選按鈕，打開單選按鈕的【屬性】面板【單選按鈕】文本框：系

9、統(tǒng)會自動將同一個段落或同一個表格中的按鈕定義為一個組，在這個組中只能選中其中一個。4.插入單選按鈕組使用單選按鈕組表單對象可以添加一個單選按鈕組，選擇【插入】|【表單】|【單選按鈕組】命令，打開【單選按鈕組】對話框。【單選按鈕】:列表框中顯示的是該按鈕組中所有的按鈕，左邊列為按鈕的【標(biāo)簽】，右邊是按鈕的【值】，相當(dāng)于單選按鈕【屬性】面板中的【選定值】?！静季?，使用】：選項區(qū)域用于指定按鈕間的組織方式3.插入復(fù)選框復(fù)選框表單對象，可以限制訪問者填寫的內(nèi)容，使收集的信息更加規(guī)范，更有利于信息的統(tǒng)計。選擇【插入】|【表單】|【復(fù)選框】命。令，即可在網(wǎng)頁文檔中創(chuàng)建復(fù)選框選中復(fù)選框，打開復(fù)選框的【屬性

10、】面板。6.插入復(fù)選框組復(fù)選框組與單選按鈕組相似，可以一次插入多個選項。選擇【插入】|【表單】|【復(fù)選框組】命令，打開【復(fù)選框組】對話框7.插入圖形按鈕選擇【插入】|【表單】|【圖像域】命令，將打開【選擇圖像源文件】對話框，選擇一幅圖像并單擊【確定】按鈕，打開【輔助標(biāo)簽屬性功能】對話框，單擊【確定】按鈕，即可在網(wǎng)頁文檔中插入一個圖形按鈕。選中圖形按鈕，打開【屬性】面板?！咎鎿Q】文本框:輸入圖像的替換文字，當(dāng)瀏覽器不顯示圖像時，將顯示該替換的文字。9.1 表單的基礎(chǔ)知識表單的基礎(chǔ)知識9.2 插入文本域表單對象插入文本域表單對象9.3 插入表單按鈕對象插入表單按鈕對象9.4 插入列表和菜單表單對象

11、插入列表和菜單表單對象9.5 檢查表單檢查表單列表和菜單也是預(yù)定義選擇對象的表單對象，使用它們可以在有限的空間內(nèi)提供多個選項。列表也稱為【滾動列表】，提供一個滾動條，允許訪問者瀏覽多個選項，并進(jìn)行多重選擇。菜單也稱為【下拉列表框】，僅顯示一個選項，該項也是活動選項，訪問者只能從菜單中選擇一項。插入列表/菜單表單對象選擇【插入】|【表單】|【列表/菜單】命令，即可在網(wǎng)頁文檔中插入列表/菜單表單。選中列表/菜單，打開列表/菜單的【屬性】面板【高度】：該項只有在選中了【列表】單選按鈕后才能使用綜合實例該實例將文本域、以及文本域的單行、多行、密碼等屬性的應(yīng)用，文件域和各種單選按鈕、復(fù)選按鈕、單選按鈕組、復(fù)選按鈕組、列表菜單、按鈕等表單對象。9.1 表單的基礎(chǔ)知識表單的基礎(chǔ)知識9.2 插入文本域表單對象插入文本域表單對象9.3 插入表單按鈕對象插入表單按鈕對象9.4 插入列表和菜單表單對象插入列表和菜單表單對象9.5 檢查表單檢查表單1.【檢