1、編輯ppt第5章 表單 編輯ppt本章主要內(nèi)容本章主要內(nèi)容l表單基礎(chǔ)表單基礎(chǔ)l標(biāo)記多行文本框標(biāo)記多行文本框l下拉列表框下拉列表框l表單應(yīng)用表單應(yīng)用編輯ppt5.1 5.1 表單基礎(chǔ)表單基礎(chǔ) 表單的主要功能是收集信息，接受瀏覽者在網(wǎng)頁(yè)中的操作，并傳遞給CGI或JSP等服務(wù)器端的表單處理程序。 有了表單使服務(wù)器端不僅可以向客戶端發(fā)送網(wǎng)頁(yè)數(shù)據(jù)，而且可以收集來(lái)自客戶端上傳的信息。 表單通常來(lái)做注冊(cè)登錄、網(wǎng)絡(luò)問(wèn)卷調(diào)查、在線考試等需要向服務(wù)器上傳的工作，這些來(lái)自客戶端的數(shù)據(jù)存儲(chǔ)于數(shù)據(jù)庫(kù)中，從而為網(wǎng)絡(luò)其它應(yīng)用提供必要的支持。 編輯ppt5.1.1 5.1.1 什么是表單什么是表單 表單實(shí)質(zhì)上就是用于實(shí)現(xiàn)網(wǎng)頁(yè)

2、瀏覽者和服務(wù)器端之間信息交換的一種頁(yè)面元素，在WWW上被廣泛用于各種信息的搜集和反饋。在web應(yīng)用中，與表單工作相關(guān)的有兩個(gè)重要組成部分： 一是描述表單的HTML源代碼； 二是用于處理用戶在表單域中輸入信息的服務(wù)器端應(yīng)用程序，如ASP、JSP等。 編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型 表單中通常包含兩類元素，一種是普通的頁(yè)面元素如文本、圖像、表格等，另一種是用于收集信息的特定頁(yè)面元素，即表單控件如按鈕、文本框、密碼框等。表單像一個(gè)容器一樣包含各種類型的控件，表單內(nèi)的控件用于接收用戶的輸入，典型的控件有文本框、按鈕等。表單中的每個(gè)控件都有特定的名稱，這個(gè)名稱有效范圍是所

3、在表單。 每個(gè)控件都有初始值和當(dāng)前值，初始值是由網(wǎng)頁(yè)設(shè)計(jì)者預(yù)先指定的，當(dāng)前值是由用戶與表單控件交互操作決定的，當(dāng)提交表單時(shí)，會(huì)把控件中的當(dāng)前值提交到服務(wù)器端。表單控件對(duì)于客戶端用戶和服務(wù)器端處理程序交互起著中間數(shù)據(jù)載體的作用，HTML中定義了以下類型的表單控件。編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型1文本框文本框 接受任何類型的字母數(shù)字文本輸入內(nèi)容。文本可以單行或多行顯示，也可以以密碼域的方式顯示，在這種情況下，輸入文本將被替換為星號(hào)或項(xiàng)目符號(hào)，以避免旁觀者看到這些文本。 使用密碼輸入框的密碼及其它信息在發(fā)送到服務(wù)器時(shí)并未進(jìn)行加密處理。所傳輸?shù)臄?shù)據(jù)可能會(huì)以字母數(shù)字文本形

4、式被截獲并被讀取。因此，始終應(yīng)對(duì)要確保安全的數(shù)據(jù)進(jìn)行加密。編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型2按鈕按鈕在單擊時(shí)執(zhí)行操作。可以為按鈕添加自定義名稱或標(biāo)簽，或者使用預(yù)定義的“提交”或“重置”標(biāo)簽。使用按鈕可將表單數(shù)據(jù)提交到服務(wù)器，或者重置表單。還可以指定其它已在腳本中定義的處理任務(wù)。編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型3單選框單選框代表互相排斥的選擇。在某單選框組（由兩個(gè)或多個(gè)共享同一名稱的單選框組成）中選擇一個(gè)單選框，就會(huì)取消選擇該組中的所有其它單選框。 編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型4復(fù)選框復(fù)選框允許在一組選

5、項(xiàng)中選擇多個(gè)選項(xiàng)。用戶可以選擇任意多個(gè)適用的選項(xiàng)。編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型5下拉列表框下拉列表框在一個(gè)滾動(dòng)列表中顯示選項(xiàng)值，用戶可以從該滾動(dòng)列表中選擇多個(gè)選項(xiàng)。“列表”選項(xiàng)在一個(gè)列表顯示選項(xiàng)值，用戶只能從中選擇單個(gè)選項(xiàng)。在下列情況下使用下拉列表框：只有有限的空間但必須顯示多個(gè)內(nèi)容項(xiàng)，或者要控制返回給服務(wù)器的值。下拉列表框與文本框不同，在文本框中用戶可以隨心所欲鍵入任何信息，甚至包括無(wú)效的數(shù)據(jù)，對(duì)于下拉列表框而言，只可以具體設(shè)置某個(gè)列表返回的確定值。 編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型6文件選擇輸入框文件選擇輸入框 使用戶可以瀏覽

6、到其計(jì)算機(jī)上的某個(gè)文件并將該文件作為表單數(shù)據(jù)上傳。 編輯ppt5.1.2 5.1.2 表單控件的類型表單控件的類型7隱藏框隱藏框 存儲(chǔ)用戶輸入的信息，如姓名、電子郵件地址或偏愛(ài)的查看方式，并在該用戶下次訪問(wèn)此站點(diǎn)時(shí)使用這些數(shù)據(jù)。 編輯ppt5.1.3 5.1.3 標(biāo)記標(biāo)記 表單是一個(gè)包含表單控件的區(qū)域，如果要在網(wǎng)頁(yè)中添加表單，就要在文檔中添加標(biāo)記。 編輯ppt5.1.3 5.1.3 標(biāo)記標(biāo)記1標(biāo)記的用法標(biāo)記的用法基本語(yǔ)法：表單控件語(yǔ)法解釋：（1）name屬性定義表單的名稱。（2）action屬性指定表單處理程序（CGI或JSP等服務(wù)器端的表單處理程序）的位置。（3）method屬性定義表單結(jié)果

7、從瀏覽器傳送到服務(wù)器的方式，屬性的參數(shù)值一般有兩種：get和post。編輯ppt5.1.3 5.1.3 標(biāo)記標(biāo)記2post方法和方法和get方法方法瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進(jìn)行處理。共有兩種方法：post方法和 get方法，默認(rèn)采用get方法。如果采用post方法，瀏覽器將會(huì)按照下面的步驟來(lái)發(fā)送數(shù)據(jù)。首先，與 action 屬性中指定的表單處理服務(wù)器建立聯(lián)系，然后會(huì)按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。在服務(wù)器端，響應(yīng)post的應(yīng)用程序開(kāi)始執(zhí)行時(shí)，就從一個(gè)標(biāo)志位置讀取參數(shù)，在應(yīng)用程序能夠使用這些表單值以前，必須對(duì)這些參數(shù)進(jìn)行解碼。用戶特定的服務(wù)器會(huì)明確指

8、定應(yīng)用程序應(yīng)該如何接受這些參數(shù)。編輯ppt5.1.3 5.1.3 標(biāo)記標(biāo)記get方法，瀏覽器會(huì)與表單處理服務(wù)器建立連接，然后直接在一個(gè)傳輸步驟中發(fā)送所有的表單數(shù)據(jù)。瀏覽器會(huì)將數(shù)據(jù)直接附在表單的處理程序URL 之后，它們兩者之間用”?”進(jìn)行分隔，各個(gè)參數(shù)之間用“&”號(hào)分隔。下面是一個(gè)采用get方法的url實(shí)例。http:/ ? parm1=x1 & param2=x2 一般瀏覽器通過(guò)上述任何一種方法都可以傳輸表單信息，而有些服務(wù)器只接受其中一種方法提供的數(shù)據(jù)。可以在 標(biāo)簽的 method屬性中指明表單處理服務(wù)器要用方法來(lái)處理數(shù)據(jù)，是post還是get。 編輯ppt5.2 5.2

9、標(biāo)記標(biāo)記 標(biāo)記用于收集用戶輸入的數(shù)據(jù)。根據(jù)標(biāo)記type 屬性值的不同，輸入框擁有多種類型。輸入字段可以是文本框、復(fù)選框、單選框、按鈕等。基本語(yǔ)法： 編輯ppt5.2 5.2 標(biāo)記標(biāo)記 （1）標(biāo)記主要有六個(gè)屬性，type，name，size，value，maxlength，check。其中name和type是必選的兩個(gè)屬性。（2）name屬性的值，在服務(wù)器端處理相應(yīng)程序中獲得該表單控件的值所采用變量名和它相同。例如屬性值為“x1”，那么服務(wù)器端通過(guò)在request對(duì)象中x1變量的值來(lái)獲得這個(gè)表單控件的值（3）在不同的輸入字段類型下，標(biāo)記的格式略有不同，其它五種屬性因type類型的不同，其含義也不

10、同。（4）type主要有九種類型：text，password，hidden，submit，reset，image，radio，checkbox，file。編輯ppt5.2.1 5.2.1 單行文本框單行文本框 當(dāng)標(biāo)記的type屬性值為“text”時(shí)，表示該輸入項(xiàng)的輸入信息是字符串。此時(shí)，瀏覽器會(huì)在相應(yīng)的位置顯示一個(gè)文本框供用戶輸入信息。基本語(yǔ)法： 例子5-1編輯ppt5.2.1 5.2.1 單行文本框單行文本框 當(dāng)type=text時(shí)，標(biāo)記為用戶可輸入文本的單行輸入字段。單行文本框還有3個(gè)可選的屬性：maxlength，size和value。（1）maxlength屬性用于設(shè)置單行輸入框可以輸

11、入的最大字符數(shù)，例如限制用戶名為10個(gè)字符、電話號(hào)碼最多為11個(gè)數(shù)字等。（2）size屬性用于設(shè)置單行文本框可顯示的最大字符數(shù)，這個(gè)值總是小于等于maxlength屬性的值，當(dāng)輸入的字符數(shù)超過(guò)文本框的長(zhǎng)度時(shí)，用戶可以通過(guò)移動(dòng)光標(biāo)來(lái)查看超出的內(nèi)容。（3）value屬性為文本框的值，可以通過(guò)設(shè)置value屬性的值來(lái)指定當(dāng)表單首次被載入時(shí)顯示在輸入框中的值。（4）如果需要一個(gè)隨表單傳到客戶端瀏覽器的文本框，希望能隨表單把值提交回來(lái)，并且用戶能夠看到且不能修改，只需要添加一個(gè)“readonly”屬性即可。編輯ppt5.2.2 5.2.2 密碼輸入框密碼輸入框 密碼輸入框type屬性值為“passwor

12、d”與單行文本輸入框看起來(lái)非常相似，所不同的只是當(dāng)用戶在輸入內(nèi)容時(shí)，是用“*”來(lái)代替顯示每個(gè)輸入的字符，以保證密碼的安全性。基本語(yǔ)法： 如果要在表單中插入密碼框，只要將標(biāo)記中type屬性值設(shè)為“password”即可，maxlength、size屬性同文件輸入框text的屬性一樣不再贅述。 例子5-2編輯ppt5.2.3 5.2.3 隱藏框隱藏框 隱藏框是用來(lái)收集或發(fā)送信息的不可見(jiàn)元素，對(duì)于網(wǎng)頁(yè)的訪問(wèn)者來(lái)說(shuō)，隱藏框是看不見(jiàn)的。當(dāng)表單被提交時(shí)，隱藏框就會(huì)將信息用你設(shè)置時(shí)定義的名稱和值發(fā)送到服務(wù)器上。 基本語(yǔ)法： （1）當(dāng)標(biāo)記的type屬性值為“hidden”時(shí)，表示輸入項(xiàng)為隱藏框?qū)⒉辉跒g覽器中顯

13、示。（2）隱藏框由于不在頁(yè)面中顯示，所以在表單中出現(xiàn)的位置沒(méi)有先后順序要求，只要包含在標(biāo)記范圍內(nèi)即可。 編輯ppt5.2.4 5.2.4 提交按鈕和重置按鈕提交按鈕和重置按鈕 當(dāng)type屬性值為“submit”時(shí)，產(chǎn)生一個(gè)提交按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)將所屬表單內(nèi)的輸入信息傳送給服務(wù)器。當(dāng)type屬性值為“reset”時(shí)，產(chǎn)生一個(gè)重置按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)清除表單中所有的輸入信息而恢復(fù)到初始狀態(tài)。一般情況下，提交與重置按鈕經(jīng)常同時(shí)出現(xiàn)。基本語(yǔ)法：例子5-3編輯ppt5.2.4 5.2.4 提交按鈕和重置按提交按鈕和重置按鈕鈕 語(yǔ)法解釋：（1）提交按鈕的name屬性是可以

14、默認(rèn)的。除name屬性外，它還有一個(gè)可選的屬性value，用于指定顯示在提交按鈕上的文字，value屬性的默認(rèn)值是“提交”。在一個(gè)表單中必須有提交按鈕，否則將無(wú)法向服務(wù)器傳送信息。（2）重置按鈕的name屬性也是可以默認(rèn)的。value屬性與submit類似，用于指定顯示在清除按鈕上的文字，value的默認(rèn)值為“重置”。 編輯ppt5.2.5 5.2.5 圖像按鈕圖像按鈕 使用圖片代替按鈕來(lái)提交或者重置表單數(shù)據(jù)。類型為圖片(type=image)的按鈕，其默認(rèn)操作是提交表單。基本語(yǔ)法：例子5-4 單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。image類型中的src屬性是必需的，它用于設(shè)

15、置圖像文件的路徑。編輯ppt5.2.6 5.2.6 單選框和復(fù)選框單選框和復(fù)選框 標(biāo)記的type屬性值為“radio”時(shí)，表示輸入項(xiàng)為一個(gè)單選框。 標(biāo)記的type屬性值為“checkbox”時(shí)，表示輸入項(xiàng)為一個(gè)復(fù)選框。基本語(yǔ)法： 例子5-5編輯ppt5.2.6 5.2.6 單選框和復(fù)選框單選框和復(fù)選框 （1）當(dāng)為單選框時(shí)，單選項(xiàng)必須是唯一的，即用戶只能選中表單中所有單選項(xiàng)中的一項(xiàng)作為輸入信息，因此，所有單選框的name屬性都應(yīng)取相同的值；不同的選項(xiàng)其屬性value的值應(yīng)是不同的；checked屬性用于指定該選項(xiàng)在初始時(shí)是被選中的。（2）當(dāng)為復(fù)選框時(shí)，用戶可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為

16、輸入信息，由于選項(xiàng)可以有多個(gè)，屬性name應(yīng)取不同的值；屬性value的參數(shù)值就是在該選項(xiàng)被選中并提交后，瀏覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，value屬性的參數(shù)值必須與選項(xiàng)內(nèi)容相同或基本相同，該屬性是必選項(xiàng)；checked屬性用于指定該選項(xiàng)在初始時(shí)是否被選中。 編輯ppt5.2.7 5.2.7 文件選擇輸入框文件選擇輸入框 在表單的內(nèi)部填寫(xiě)文件路徑，然后通過(guò)表單上傳。文件選擇輸入框的外觀是一個(gè)文本框加一個(gè)瀏覽按鈕，既可以直接將要上傳給網(wǎng)站的文件的路徑寫(xiě)在文本框內(nèi)，也可以單擊瀏覽按鈕選擇文件。基本語(yǔ)法：例子5-6 （1）在表單中插入文件選擇輸入框，只要將標(biāo)記中type屬性值設(shè)為“file”就可以

17、插入文件選擇輸入框。（2）標(biāo)記中method屬性值只能是“post”，不能采用get方法進(jìn)行上傳。（3）標(biāo)記中enctype屬性值的設(shè)定，確保文件夠采用正確的格式上傳。 編輯ppt5.3 5.3 多行文本框多行文本框 用標(biāo)記可以來(lái)定義高度超過(guò)一行的文本輸入框，標(biāo)記是成對(duì)標(biāo)記，首標(biāo)記和尾標(biāo)記之間的內(nèi)容就是顯示在文本輸入框中的初始信息。標(biāo)記有四個(gè)屬性：name，rows，cols，wrap。基本語(yǔ)法：例子5-7 編輯ppt5.3 5.3 多行文本框（續(xù)）多行文本框（續(xù)） 語(yǔ)法解釋：（1）name屬性用于指定文本輸入框的名字。（2）rows屬性用于設(shè)置多行文本輸入框的行數(shù)，此屬性的值是數(shù)字，瀏覽器會(huì)

18、自動(dòng)為高度超過(guò)一行的文本輸入框添加垂直滾動(dòng)條。但是，當(dāng)輸入文本的行數(shù)小于或等于rows屬性的值時(shí)，滾動(dòng)條將不起作用。（3）cols屬性用于設(shè)置多行文本輸入框的列數(shù)。（4）wrap：默認(rèn)值是文本自動(dòng)換行，當(dāng)輸入內(nèi)容超過(guò)文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)。編輯ppt5.3 5.3 多行文本框（續(xù)）多行文本框（續(xù)） 啟動(dòng)自動(dòng)換行功能（word wrapping），就要將 wrap 屬性設(shè)置為 virtual 或 physical。當(dāng)用戶鍵入的一行文本長(zhǎng)于文本區(qū)的寬度時(shí)，瀏覽器會(huì)自動(dòng)將多余的文字挪到下一行。 wrap=virtual 將實(shí)現(xiàn)文本區(qū)內(nèi)的自動(dòng)換行，以改善對(duì)用戶的顯示，但在傳輸給服務(wù)器時(shí)，文本只在用戶按下Enter 鍵的地方進(jìn)行換行，其它地方?jīng)]有換行的效果。 wrap=physical 將實(shí)現(xiàn)文本區(qū)內(nèi)的自動(dòng)換行，并以這種形式傳送給服務(wù)器，就像用戶真的那樣鍵入的。因?yàn)槲谋疽杂脩粼谖谋緟^(qū)內(nèi)看到的效果傳輸給服務(wù)器，因?yàn)槭褂米詣?dòng)換行是非常有用的方法。如果把 wrap 設(shè)置為 off，將會(huì)按照默認(rèn)值處理。 編輯ppt5.4 5.4 下拉列表框下拉列表框 在表單中，通過(guò)和標(biāo)記可以在瀏覽器中設(shè)計(jì)一個(gè)下拉式的列表或帶有滾動(dòng)條的