網(wǎng)頁設(shè)計(CS5)-第9講-添加交互表單

1、Dreamweaver CS5第第9 9講講添加交互表單添加交互表單第第9講講添加交互表單添加交互表單Dreamweaver CS51 認識表單2 應(yīng)用表單1什么是表單2表單對象3表單屬性4插入表單5插入表單對象認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講什么是表單 表單是網(wǎng)頁訪問者與站點進行信息傳遞、互動交流的工具，它一般以窗體的形式存在頁面中。表單依靠具體的表單對象收集信息，表單對象包含多種類型，如文本框、文本區(qū)域、按鈕、單選框、復(fù)選框、列表/菜單等，訪問者可以在表單對象內(nèi)輸入或者選擇信息，然后通過按鈕將信息提交給網(wǎng)站，網(wǎng)站對信息再進行處

2、理。 如圖所示，展示了表單在留言簿頁面中的一個應(yīng)用實例，其中使用了表單對象有文本框、文本區(qū)域、列表/菜單、按鈕。 認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講表單對象 【表單】插入欄列出了具體的表單對象，如上圖所示?！氨韱巍保嚎稍谖臋n中插入表單。任何其他表單對象，如文本域、按鈕等，都必須插入表單之中，這樣所有瀏覽器才能正確處理這些數(shù)據(jù)?！拔谋居颉保嚎稍诒韱沃胁迦胛谋居?。文本域可接受任何類型的字母數(shù)字項。輸入的文本可以顯示為單行、多行或者顯示為項目符號或星號（用于保護密碼）。認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講“復(fù)選框”：可在表單中

3、插入復(fù)選框。復(fù)選框允許在一組選項中選擇多項，用戶可以選擇任意多個適用的選項。“單選按鈕”：可在表單中插入單選按鈕。單選按鈕代表互相排斥的選擇。選擇一組中的某個按鈕，就會取消選擇該組中的所有其他按鈕。例如，用戶可以選擇“是”或“否”。“單選按鈕組” ：可插入共享同一名稱的單選按鈕的集合?！傲斜?菜單”：可使用戶可以在列表中創(chuàng)建用戶選項?！傲斜怼边x項在滾動列表中顯示選項值，并允許用戶在列表中選擇多個選項。“菜單”選項在彈出式菜單中顯示選項值，而且只允許用戶選擇一個選項?！疤D(zhuǎn)菜單”：插入可導(dǎo)航的列表或彈出式菜單。跳轉(zhuǎn)菜單允許您插入一種菜單，在這種菜單中的每個選項都鏈接到文檔或文件。請參見創(chuàng)建跳轉(zhuǎn)菜

4、單。 認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講“圖像域”：可使用戶可以在表單中插入圖像?？梢允褂脠D像域替換“提交”按鈕，以生成圖形化按鈕?！拔募颉保嚎稍谖臋n中插入空白文本域和“瀏覽”按鈕。文件域使用戶可以瀏覽到其硬盤上的文件，并將這些文件作為表單數(shù)據(jù)上傳。“按鈕”：可在表單中插入文本按鈕。按鈕在單擊時執(zhí)行任務(wù)，如提交或重置表單。可以為按鈕添加自定義名稱或標簽，或者使用預(yù)定義的“提交”或“重置”標簽之一。“標簽”：可在文檔中給表單加上標簽，以形式開頭和結(jié)尾。“字段集”：可在文本中設(shè)置文本標簽。認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講表單屬性表單屬性的各項意義如下： 【表單名稱】

5、文本框：設(shè)定表單的名稱，可用于程序的調(diào)用?！緞幼鳌课谋究颍嚎梢暂斎胍粋€URL地址，指向要處理表單數(shù)據(jù)的程序文件?！痉椒ā窟x項框：選擇表單數(shù)據(jù)的發(fā)送方式?！澳J”方法使用瀏覽器的默認設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器。通常，“默認”方法為“GET”方法?！癎ET” 方法將值附加到請求該頁面的 URL 中?！癙OST”方法將在 HTTP 請求中嵌入表單數(shù)據(jù)。不要使用“GET”方法發(fā)送長表單。URL 的長度限制在 8192 個字符以內(nèi)，如果發(fā)送的數(shù)據(jù)量太大，數(shù)據(jù)將被截斷，從而導(dǎo)致意外的或失敗的處理結(jié)果。并且在發(fā)送機密用戶名和密碼、信用卡號或其他機密信息時，不要使用“GET”方法，用“GET”方法傳遞信息不安

6、全?！灸繕恕窟x項框：可以選擇在哪個目標位置打開新頁面?！綧IME類型】選項框：指定表單數(shù)據(jù)采用什么樣的編碼類型提交給服務(wù)器。認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講插入表單操作：將【常用】插入欄切換到【表單】插入欄 ，然后單擊【表單】插入欄上的表單按鈕，即可在編輯窗口添加表單 ，如下圖所示。認識表單認識表單1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講插入表單對象操作：首先插入一個表單，然后將鼠標光標置于表單域內(nèi)，單擊【表單】插入欄上的表單對象按鈕即可，如下圖，插入一個按鈕表單對象。 1 表單使用2 文本區(qū)域 3 單選按鈕4 列表/菜單5 訪客留言頁面6 用戶注冊頁面應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)

7、計第第9 9講講應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講表單使用對于網(wǎng)頁中的表單，用戶可以根據(jù)需要調(diào)整它的布局，例如可以使用換行符、段落標記、預(yù)格式化的文本或表來設(shè)置表單的格式。使用表格為表單對象和域標簽提供結(jié)構(gòu)是比較常用的一種調(diào)整表單布局的方法。當在表單中使用表格時，請確保所有的 table 標簽都位于兩個 form 標簽之間。需要注意的是不能將一個表單插入到另一個表單中，即標簽不能交迭，但是可以在一個頁面中包含多個表單。應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講文本域表單文本域和按鈕是網(wǎng)頁表單中最常用的表單對象之一，在文本域中可以輸入任何類型的文本內(nèi)容。根據(jù)文本域的行數(shù)和顯示

8、不同，可分為三種類型：單行文本域、多行文本域、密碼文本域。密碼文本域在頁面中不顯示具體的文本內(nèi)容，而以“*”代替或者其他指定的符號代替，它的屬性和單行文本域基本相同。本例中涉及的幾個屬性項的含義 。應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講文本域表單【文本域】文本框：用于為文本域指定一個名稱，此名稱必須是唯一的?！咀址膶挾取课谋究颍涸O(shè)置在瀏覽器中顯示的文本長度。【最多字符數(shù)】文本框：指定文本域中最多可輸入的字符數(shù)。超出了將發(fā)出警告聲，不填則可輸入任意數(shù)量的字符?！绢愋汀繂芜x項：指定文本域的類型?！境跏贾怠课谋究颍河糜谥付ㄝd入表單時文本域中顯示的文本內(nèi)容，一般用來提示訪問者以使他們知道輸

9、入的內(nèi)容。例如，“請輸入名字”請求名字信息?！绢悺窟x項框：用于設(shè)置文本域的CSS樣式?！靖叨取课谋究颍河糜跒槲谋居蛟O(shè)置高度，超出高度用滾動條顯示。應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講文本域表單【換行】選項框：用于選擇輸入內(nèi)容時，文本域中換行方式。有4個選項：“默認”：用瀏覽器默認的方式換行；“關(guān)”：當輸入的文本內(nèi)容超過文本域?qū)挾葧r不換行，自動出現(xiàn)水平滾動條，滾動顯示；“虛擬”：當輸入的內(nèi)容超過文本域時自動換行，但發(fā)送的數(shù)據(jù)中沒有換行符；“實體”：當輸入的內(nèi)容超過文本域時自動換行，但發(fā)送的數(shù)據(jù)中有換行符?！景粹o名稱】文本框：用于指定按鈕的名稱?！局怠课谋究颍涸O(shè)置按鈕上顯示的文本內(nèi)容，

10、以表明該按鈕的作用。如此處輸入“提交留言”，則按鈕上就顯示“提交留言”?！緞幼鳌繂芜x項：設(shè)置單擊按鈕后發(fā)生的動作，有3個選項。“提交表單”：將表單數(shù)據(jù)提交到表單指定的位置；“重設(shè)表單”：將表單內(nèi)的所有對象內(nèi)容還原；“無”：不發(fā)生任何動作。應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講單選按鈕【單選按鈕】文本框：定義單選組的名稱，一組中的單選按鈕具有相同的名字；【選定值】文本框：該項被選中時，提交給服務(wù)器的值；【初始狀態(tài)】選項組：設(shè)置該按鈕在初始狀態(tài)是否被選中，一組中只能有一個初始狀態(tài)設(shè)為選中。應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第9 9講講菜單/列表【列表/菜單】文本框：用于指定列表或者菜單的名稱；【類型】選項組：設(shè)定當前對象是菜單還是列表；【高度】文本框：設(shè)置列表的高度；【初始化時選定】文本框：設(shè)定首次載入表單時選中那些選項； 按鈕：設(shè)定列表/菜單的項目和項目值。應(yīng)用表單應(yīng)用表單2網(wǎng)頁設(shè)計網(wǎng)