網頁設計(CS5)-第9講-添加交互表單

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

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

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

4、單。 認識表單認識表單1網頁設計網頁設計第第9 9講講“圖像域”：可使用戶可以在表單中插入圖像?？梢允褂脠D像域替換“提交”按鈕，以生成圖形化按鈕。“文件域”：可在文檔中插入空白文本域和“瀏覽”按鈕。文件域使用戶可以瀏覽到其硬盤上的文件，并將這些文件作為表單數據上傳?！鞍粹o”：可在表單中插入文本按鈕。按鈕在單擊時執(zhí)行任務，如提交或重置表單?？梢詾榘粹o添加自定義名稱或標簽，或者使用預定義的“提交”或“重置”標簽之一?！皹撕灐保嚎稍谖臋n中給表單加上標簽，以形式開頭和結尾?！白侄渭保嚎稍谖谋局性O置文本標簽。認識表單認識表單1網頁設計網頁設計第第9 9講講表單屬性表單屬性的各項意義如下： 【表單名稱】

5、文本框：設定表單的名稱，可用于程序的調用。【動作】文本框：可以輸入一個URL地址，指向要處理表單數據的程序文件?！痉椒ā窟x項框：選擇表單數據的發(fā)送方式?！澳J”方法使用瀏覽器的默認設置將表單數據發(fā)送到服務器。通常，“默認”方法為“GET”方法。“GET” 方法將值附加到請求該頁面的 URL 中?！癙OST”方法將在 HTTP 請求中嵌入表單數據。不要使用“GET”方法發(fā)送長表單。URL 的長度限制在 8192 個字符以內，如果發(fā)送的數據量太大，數據將被截斷，從而導致意外的或失敗的處理結果。并且在發(fā)送機密用戶名和密碼、信用卡號或其他機密信息時，不要使用“GET”方法，用“GET”方法傳遞信息不安

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

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

8、不同，可分為三種類型：單行文本域、多行文本域、密碼文本域。密碼文本域在頁面中不顯示具體的文本內容，而以“*”代替或者其他指定的符號代替，它的屬性和單行文本域基本相同。本例中涉及的幾個屬性項的含義 。應用表單應用表單2網頁設計網頁設計第第9 9講講文本域表單【文本域】文本框：用于為文本域指定一個名稱，此名稱必須是唯一的?！咀址膶挾取课谋究颍涸O置在瀏覽器中顯示的文本長度?！咀疃嘧址麛怠课谋究颍褐付ㄎ谋居蛑凶疃嗫奢斎氲淖址麛怠３隽藢l(fā)出警告聲，不填則可輸入任意數量的字符。【類型】單選項：指定文本域的類型?！境跏贾怠课谋究颍河糜谥付ㄝd入表單時文本域中顯示的文本內容，一般用來提示訪問者以使他們知道輸

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

10、以表明該按鈕的作用。如此處輸入“提交留言”，則按鈕上就顯示“提交留言”。【動作】單選項：設置單擊按鈕后發(fā)生的動作，有3個選項?！疤峤槐韱巍保簩⒈韱螖祿峤坏奖韱沃付ǖ奈恢?；“重設表單”：將表單內的所有對象內容還原；“無”：不發(fā)生任何動作。應用表單應用表單2網頁設計網頁設計第第9 9講講單選按鈕【單選按鈕】文本框：定義單選組的名稱，一組中的單選按鈕具有相同的名字；【選定值】文本框：該項被選中時，提交給服務器的值；【初始狀態(tài)】選項組：設置該按鈕在初始狀態(tài)是否被選中，一組中只能有一個初始狀態(tài)設為選中。應用表單應用表單2網頁設計網頁設計第第9 9講講菜單/列表【列表/菜單】文本框：用于指定列表或者菜單的名稱；【類型】選項組：設定當前對象是菜單還是列表；【高度】文本框：設置列表的高度；【初始化時選定】文本框：設定首次載入表單時選中那些選項； 按鈕：設定列表/菜單的項目和項目值。應用表單應用表單2網頁設計網