Dreamweaver網(wǎng)頁設計制作表單頁面頁

1、Dreamweaver 網(wǎng)頁設計第7章 制作表單頁面本章內(nèi)容了解表單的工作原理制作表單插入各種表單元素第1講 表單的概念 表單的作用就是收集用戶的信息 用于調(diào)查、注冊、定購等 在使用搜索引擎查找信息時，查找的關鍵字也是通過表單提交到服務器上 利用表單，可以幫助Internet服務器從用戶處收集信息 第1講 表單的概念表單的工作過程如下： 訪問者在瀏覽有表單的網(wǎng)頁時，可填寫必須的信息，然后單擊“提交”按鈕。 這些信息通過Internet傳送到服務器上。 服務器上專門的程序?qū)@些數(shù)據(jù)進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。 當數(shù)據(jù)完整無誤后，服務器反饋一個輸入完成信息。 工作過程第1講

2、 表單的概念 交互式表單收集用戶信息，將其提交到服務器，從而實現(xiàn)與客戶的交互，一個完整的表單應該包含兩個部分： 在網(wǎng)頁中進行描述的表單對象 應用程序，它可以是服務器端的，也可以是客戶端的，用于對客戶信息進行分析處理。 表單的組成第1講 表單的概念 瀏覽器處理表單的過程一般是：1. 用戶在表單中輸入數(shù)據(jù)，然后提交表單2. 瀏覽器根據(jù)表單體中的設置處理用戶輸入的數(shù)據(jù)第1講 表單的概念 服務器端處理 若表單指定通過服務器端的腳本程序進行處理，則該程序處理完畢后將結(jié)果反饋給瀏覽器（即用戶看到的反饋結(jié)果） 客戶端處理 若表單指定通過客戶端（即用戶方）的腳本程序處理，則處理完畢后也會將結(jié)果反饋給用戶。 表

3、單的處理方式第1講 表單的概念 服務器端方式：主要優(yōu)點是能全方位地處理用戶輸入的數(shù)據(jù)，但占用服務器的資源 客戶端方式：優(yōu)點是不占用服務器資源，反饋結(jié)果快，但只能對用戶輸入的數(shù)據(jù)進行有限的處理。 兩種表單數(shù)據(jù)處理的優(yōu)缺點第2講 插入各種表單元素 表單的組成： 一個表單域 若干個表單元素(文本框、單選按鈕、下拉菜單、多選按鈕等) 所有的表單元素要放到表單域中才有效。7.2.1插入表單第2講 插入各種表單元素動作：用于設置處理表單的服務器端腳本的文件路徑。7.2.1插入表單第2講 插入各種表單元素方法：表單提交的方法 Post 表單信息將以文件的形式提交，一般建議使用Post方式提交表單。 Get

4、將瀏覽者提供的信息附加在URL地址的后面提交到服務器，為默認提交方式，但不能超過8192個字符，且不具有保密性。7.2.1插入表單第2講 插入各種表單元素要點：1. 插入：“快捷工具欄” “表單” “文本字段”2. 文本字段接受任何類型單字母、數(shù)字、文本。3. “表單名”應盡量使用英文，不應含有空格(建議使用駝峰式的規(guī)范命名方法)。文本域的名稱是程序處理時的依據(jù)，因此應盡量與收集內(nèi)容一致。例如：txtUsername、txtPassword。7.2.2插入單行文本域第2講 插入各種表單元素3. “字符寬度”：文本框顯示在頁面上的長度。長度單位為英文字符數(shù)(2個英文字符1個中文字符)。4. “最

5、大字符數(shù)”：文本框內(nèi)所能填寫的最多的字符數(shù)。長度單位為英文字符數(shù)。5. “初始值”：默認狀態(tài)下填寫在文本框的文字，即頁面載入時顯示在文本框中的內(nèi)容。7.2.2插入單行文本域第2講 插入各種表單元素要點：1. 插入：“快捷工具欄” “表單” “文本字段”類型選擇“密碼”2. 用于填寫秘密等機密內(nèi)容時使用3. 密碼框中的內(nèi)容將以特殊字符顯示，默認為“*”或“”4. 密碼框的屬性與單行文本框的屬性完全一致。7.2.3插入密碼域第2講 插入各種表單元素多行文本域(textarea)：可輸入多行文本的文本域，相當于一個屬性為多行的單行文本域。7.2.4插入多行文本域第2講 插入各種表單元素要點：1. 插

6、入：“快捷工具欄” “表單” “文本區(qū)域”2. 基本屬性同單行文本框相同（“命名”、“字符寬度”、“初始值”）3. “行數(shù)(rows)”：文本域的行數(shù)。7.2.4插入多行文本域第2講 插入各種表單元素3. “換行(wrap)”：是否允許文字換行。關(off)：不允許使用換行虛擬(virtual)：當文本超過文本框?qū)挾葧r，自動換行，但傳送數(shù)據(jù)時不會將換行符傳出。實體(physical)：當文本超過文本框?qū)挾葧r，自動換行，當傳送數(shù)據(jù)時換行符也會被傳出。7.2.4插入多行文本域第2講 插入各種表單元素復選框(checkbox)：可以提供瀏覽者進行多項選擇的選擇框。要點：1. 插入：“快捷工具欄” “

7、表單” “單選按鈕”2. 名稱(name)：在驗證用戶提交表單或服務器腳本處理表單時用于區(qū)分復選框內(nèi)容。同一組復選框應使用統(tǒng)一的名稱。建議采用駝峰式命名方式。7.2.5插入復選框第2講 插入各種表單元素3. “選定值”：復選框選項的值。復選框所提交的內(nèi)容為復選框的值，而不是復選框的名稱。4. “初始狀態(tài)”：頁面載入時，復選框的狀態(tài)?？赏ㄟ^“已勾選”、“未選中”來區(qū)分。7.2.5插入復選框第2講 插入各種表單元素單選按鈕：用于在多個選項中選擇一個項目。要點：1. 插入：“快捷工具欄”表單“單選按鈕”2. 名稱(name)：在驗證用戶提交表單或服務器腳本處理表單時用于區(qū)分單選框內(nèi)容。同一組單選按鈕

8、應具有相同的名稱。建議采用駝峰式命名方式。7.2.6插入單選按鈕第2講 插入各種表單元素3. “選定值”：單選框選項的值。單選框所提交的內(nèi)容為單選框的值，而不是單選框的名稱。4. “初始狀態(tài)”：頁面載入時，單選框的狀態(tài)?？赏ㄟ^“已勾選”、“未選中”來區(qū)分。7.2.6插入單選框第2講 插入各種表單元素 列表和菜單可以將多個項目以特殊的方式羅列在網(wǎng)頁上，但又節(jié)省了網(wǎng)頁的空間。列表：可以顯示一定數(shù)量的選項，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以拖動滾動條來觀看各選項。菜單：一種最節(jié)省空間的羅列選項的方式，正常狀態(tài)只能看到一個選項，單擊按鈕打開才能看到全部選項。7.2.7插入列表/菜單第2講

9、 插入各種表單元素7.2.7插入列表/菜單第2講 插入各種表單元素要點：1. 插入：“快捷工具欄” “表單” “列表/菜單”2. “類型”：在屬性中選擇使用“菜單”或“列表”3. “列表值”：項目標簽是頁面上顯示的內(nèi)容，值是項目傳遞時的內(nèi)容。4. “選定范圍”：“列表”可以設置該參數(shù)，勾選“允許多項”以同時選定多個選項。瀏覽者按Ctrl或Shift實現(xiàn)多選.7.2.7插入列表/菜單第2講 插入各種表單元素文件域：實現(xiàn)將文件從客戶端提交到服務器(網(wǎng)站)，文件域的外觀由一個“文本框”和一個“瀏覽按鈕”構(gòu)成。7.2.8插入文件域第2講 插入各種表單元素要點：1. 插入： “快捷工具欄” “表單”“文

10、件域”2. “文件域名稱”：以英文命名，并于文件域內(nèi)容相關，建議使用駝峰式命名方法。3.“字符寬度”：設定文件域文本框的寬度，單位是英文字符。4. “最多字符數(shù)”：設定文件域文本框中所能添加的最多字符數(shù)。7.2.8插入文件域第2講 插入各種表單元素按鈕的作用：1. 激發(fā)提交表單的動作(表單域的動作)2. 將表單恢復到初始狀態(tài)7.2.9插入按鈕第2講 插入各種表單元素要點：1. 插入： “快捷工具欄” “表單”“按鈕”2. “動作”：設置單擊按鈕時觸發(fā)的動作。提交表單：將動作提交到表單屬性的“動作”所指定的路徑。重置表單：清楚表單中現(xiàn)有的內(nèi)容。無：單擊無動作，可以通過腳本語言賦予按鈕的新功能。7

11、.2.9插入按鈕第2講 插入各種表單元素 使用默認的按鈕形式往往讓人覺得單調(diào)。網(wǎng)頁可以使用插入圖像按鈕功能，創(chuàng)建和網(wǎng)頁整體效果相統(tǒng)一的圖像提交按鈕。7.2.10插入圖像域第2講 插入各種表單元素要點：1. 插入： “快捷工具欄” “表單”“按鈕”2. “替換”：設置替換文本。當圖像無法下載時，圖像位置會插入替換文本；當圖像下載完整，鼠標移至圖像上方，替換文字會顯示出來，起到說明作用。7.2.10插入圖像域第2講 插入各種表單元素 跳轉(zhuǎn)菜單是創(chuàng)建鏈接的一種形式,但比真正的鏈接，跳轉(zhuǎn)菜單可以節(jié)省很大的空間。7.2.11插入跳轉(zhuǎn)菜單第2講 插入各種表單元素要點：1.插入： “快捷工具欄” “表單”“跳轉(zhuǎn)菜單”7.2.11插入跳轉(zhuǎn)菜單第2講 插入各種表單元素2. “文本”：顯示在頁面上的選項內(nèi)容。3. “選擇時，轉(zhuǎn)到URL”：選擇文本時，跳轉(zhuǎn)到的地址。4. “菜單之后插入前往按鈕”：在頁面跳轉(zhuǎn)菜單后插入一個“前往”按鈕，瀏覽者選擇項目后，需要點擊“前往”按鈕進行跳轉(zhuǎn)。7.2.11插入跳轉(zhuǎn)菜單練習思考1. 簡述表單的處理過程。答：當用戶填寫了表單并單擊“提交”按鈕后，填寫的信息會被發(fā)送到服務器上，服務器端腳本或應用程序?qū)π畔⑦M行處理，并將成功結(jié)果反饋瀏覽者，或執(zhí)行某些特定的程序。 簡答練習思考2. 制作表單頁面的第一步是什么？答：每個表單都是由一個表單域和若干個表單元素組成的，所有的