第7章第2部分表單的設(shè)計(jì)

1、第7章第2部分表單的設(shè)計(jì) 7.1 標(biāo)簽7.2 標(biāo)簽 7.3 下拉菜單select/option 7.4 多行文本框textarea7.5 表單在網(wǎng)頁中的應(yīng)用 上一頁下一頁目 錄結(jié) 束本 節(jié)7.2 標(biāo)簽 7.2.1 文本框text7.2.2 提交按鈕submit與重置按鈕reset7.2.3 密碼框password7.2.4 單選框radio7.2.5 復(fù)選框checkbox7.2.6 圖像按鈕image7.2.7 隱含框hidden7.2.8 文件選擇輸入框file 上一頁下一頁目 錄結(jié) 束本 節(jié)7.3.1 select標(biāo)簽7.3.2 option標(biāo)簽 7.3 下拉菜單上一頁下一頁目 錄結(jié) 束

2、本 節(jié)7.5.1 CGI程序的概念7.5.2 表單配合CGI程序 7.5 表單在網(wǎng)頁中的應(yīng)用 上一頁下一頁目 錄結(jié) 束本 節(jié)第7章 表單的設(shè)計(jì) 隨著Internet的迅速發(fā)展，用戶的要求越來越高。他們不僅希望能從Web服務(wù)器中獲得信息，而且還希望能向Web服務(wù)器反饋信息。HTML是利用表單（Form）來設(shè)計(jì)交互界面的。 “表單”則是接受瀏覽者在網(wǎng)頁中的操作，傳遞給服務(wù)器中的程序（如CGI程序），它是動(dòng)態(tài)的，有輸入框及按鈕等。使用表單并配合CGI程序，網(wǎng)頁能夠知道瀏覽的人做了哪些事情，然后針對(duì)這些事情適當(dāng)?shù)丶右曰貞?yīng)，就可以做成一個(gè)具有交互功能的網(wǎng)頁了。本章的內(nèi)容就是要告訴你，如何使用表單和CGI

3、程序來讓自己的網(wǎng)頁和瀏覽網(wǎng)頁的人之間進(jìn)行互相交流。上一頁下一頁目 錄結(jié) 束本 節(jié) 表單標(biāo)簽是成對(duì)標(biāo)簽，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是一個(gè)表單。 表單form為瀏覽者在屏幕上建立一張表格，表格中有明確的文字提示，使瀏覽者可以在表格上輸入自己信息，然后使用提交按鈕，將瀏覽者的信息傳送給服務(wù)器。 表單form中的HTML代碼要完成兩件事情：一是指出CGI的路徑和名稱，二是要將表單輸入的信息傳遞給CGI。至于CGI的概念，我們將在下一小節(jié)中講，這里，讀者只要把它當(dāng)作一種在服務(wù)器上運(yùn)行的應(yīng)用程序就可以了。7.1 標(biāo)簽上一頁下一頁目 錄結(jié) 束本 節(jié)在HTML中，form的語法結(jié)構(gòu)如下：在標(biāo)簽里有兩個(gè)屬性：a

4、ction和method。上一頁下一頁目 錄結(jié) 束本 節(jié)1action屬性 WWW是采用客戶/服務(wù)器工作方式的。在瀏覽器端得到的用戶反饋信息將被傳送到Web服務(wù)器中，由相應(yīng)的處理程序進(jìn)行處理。action屬性的作用就是指出該表單所對(duì)應(yīng)的處理程序的位置。它的參數(shù)值就是該程序的URL。 目前，在服務(wù)器端的采用較多的處理程序都是CGI程序，所以action屬性寫明的就是這個(gè)form需要執(zhí)行的CGI程序名，一般來說，處理用戶反饋信息的程序CGI程序是放在Web服務(wù)器的CGI-BIN目錄下的，一旦用戶提交輸入信息后，服務(wù)器便啟動(dòng)這個(gè)程序，完成查詢?nèi)蝿?wù)。上一頁下一頁目 錄結(jié) 束本 節(jié)2method屬性 m

5、ethod屬性用于指定該表單的運(yùn)行方式。屬性的參數(shù)值為get和post之一，默認(rèn)的方式是get。當(dāng)值為get時(shí)表示該表單主要是從服務(wù)器中獲取信息，因此它傳送給服務(wù)器的反饋信息長度不能超過255個(gè)字符；當(dāng)值為post時(shí)表示該表單主要是向服務(wù)器發(fā)送信息的，它傳送給服務(wù)器的反饋信息長度沒有限制。 只使用這一標(biāo)簽是很難完成用戶信息輸入的，在的開始與結(jié)束標(biāo)簽之間，除了可以使用以前講的那些標(biāo)簽外，還有三個(gè)特殊標(biāo)簽，它們是：input、select和textarea。下面，讓我們一起學(xué)習(xí)。上一頁下一頁目 錄結(jié) 束本 節(jié)7.2 標(biāo)簽 是個(gè)單標(biāo)簽，沒有結(jié)束標(biāo)簽，它必須嵌套在表單標(biāo)簽中使用，用于定義一個(gè)用戶輸入項(xiàng)

6、。標(biāo)簽主要有六個(gè)屬性：type、name、size、value、maxlength和checked，其中name和type是兩個(gè)必選屬性。 name屬性的參數(shù)值是相應(yīng)處理程序中的變量名，Web服務(wù)器將把這條輸入信息的值賦予name屬性規(guī)定的變量。type屬性用于指定該輸入項(xiàng)提供的輸入方式即指出瀏覽者輸入的值是什么類型的。 在不同的輸入方式下，標(biāo)簽的格式略有不同，其他五種屬性因type的類型不同，含義也不同。type主要有九種類型：text、password、radio、checkbox、submit、reset、image、hidden和file。上一頁下一頁目 錄結(jié) 束本 節(jié) 當(dāng)type的類

7、型為text時(shí)，表示該輸入項(xiàng)的輸入信息是字符串。此時(shí)，瀏覽器會(huì)在相應(yīng)的位置顯示一個(gè)文本框供用戶輸入信息。此文本框是一個(gè)只能輸入一行文字的輸入框。當(dāng)type=text時(shí)，標(biāo)簽除了有2個(gè)不可缺省的屬性name和type外，還有3個(gè)可選的屬性：value、size和maxlength。 1size屬性：用于指定文本框的長度，默認(rèn)值為20，以字節(jié)為單位。 2value屬性：設(shè)定預(yù)先出現(xiàn)在文本框中的內(nèi)容。 3maxlength屬性：表示該文本框允許用戶輸入的最大字符數(shù)。此值總是大于或等于size屬性的參數(shù)值。當(dāng)輸入的字符數(shù)超過文本框的長度時(shí)，用戶可以通過移動(dòng)光標(biāo)來查看超過部分的內(nèi)容。 7.2.1 文本框

8、text上一頁下一頁目 錄結(jié) 束本 節(jié)7.2.2 提交按鈕submit與重置按鈕reset 當(dāng)type=submit時(shí)，瀏覽器會(huì)在相應(yīng)的位置產(chǎn)生一個(gè)提交按鈕。當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。提交按鈕的name屬性是可以缺省的。除name屬性外，它還有一個(gè)可選的屬性value，用于指定顯示在提交按鈕上的文字。value屬性的缺省值是“提交查詢內(nèi)容”。在一個(gè)表單中必須有提交按鈕，不然將無法向服務(wù)器傳送信息。 當(dāng)type=reset時(shí)，瀏覽器會(huì)在相應(yīng)位置產(chǎn)生一個(gè)重置按鈕。當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)清除表單中所有的輸入信息而恢復(fù)到初始狀態(tài)。重置按鈕的name屬性也是可以

9、缺省的。除name屬性外，它也有一個(gè)可選的屬性value，用于指定顯示在清除按鈕上的文字。value屬性的缺省值是“重置”。 一般來說，提交與重置按鈕應(yīng)同時(shí)出現(xiàn)。 上一頁下一頁目 錄結(jié) 束本 節(jié)7.2.3 密碼框password password類型與text類型使用起來很相似，不同之外只是當(dāng)瀏覽者輸入內(nèi)容時(shí)，不顯示所輸入的內(nèi)容，而是用星號(hào)“*”來代替每個(gè)密碼字符，以保證密碼的安全。上一頁下一頁目 錄結(jié) 束本 節(jié)7.2.4 單選框radio 當(dāng)type=radio時(shí)，表示該輸入項(xiàng)是一個(gè)單選項(xiàng)。單選項(xiàng)必須是唯一的，即用戶只能選中表單中所有單選項(xiàng)中的一項(xiàng)作為輸入信息。因此，所有屬性name都應(yīng)取相

10、同的值，但屬性value的值應(yīng)是不同的，而其中的checked屬性用于指定該選項(xiàng)在初始時(shí)是被選中的。上一頁下一頁目 錄結(jié) 束本 節(jié) 當(dāng)type=checkbox時(shí)，表示該輸入項(xiàng)是一個(gè)復(fù)選項(xiàng)，用戶可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為輸入信息。由于選擇是多項(xiàng)的，屬性name應(yīng)取不同的值。屬性value的參數(shù)值就是該項(xiàng)被選中并提交后，Web瀏覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，value屬性的參數(shù)值必須與選項(xiàng)內(nèi)容相同或基本相同，該屬性是不可缺少的。而checked屬性用于指定該選項(xiàng)在初始時(shí)是被選中的。7.2.5 復(fù)選框checkbox15上一頁下一頁目 錄結(jié) 束本 節(jié) 當(dāng)type=image時(shí)，瀏覽

11、器會(huì)在相應(yīng)位置產(chǎn)生一個(gè)圖像按鈕，當(dāng)用戶單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。image類型中的src屬性是必須的，它用于設(shè)置圖像文件的路徑。另外，很多在圖像標(biāo)簽中使用的屬性規(guī)定也可以在圖像按鈕中使用。7.2.6 圖像按鈕image16上一頁下一頁目 錄結(jié) 束本 節(jié) 當(dāng)type=hidden時(shí)，表示輸入項(xiàng)將不在瀏覽器窗口中顯示。如果用戶不想顯示某些選項(xiàng)而又不愿將它們從文檔中刪去的話，就可以通過將這些選項(xiàng)中type屬性的參數(shù)值改為hidden來達(dá)到上述目的。7.2.7 隱含框hidden17上一頁下一頁目 錄結(jié) 束本 節(jié) 文件選擇輸入框在文件上傳程序中應(yīng)用最為廣泛。文件選擇輸入框雖

12、然看似復(fù)雜，但是在HTML中，只需通過就可以完全實(shí)現(xiàn)了。7.2.8 文件選擇輸入框file18上一頁下一頁目 錄結(jié) 束本 節(jié) 在表單中，通過和標(biāo)簽就可以在瀏覽器中出現(xiàn)一個(gè)下拉式菜單或帶有滾動(dòng)條的菜單，瀏覽者可以在菜單中選中一個(gè)或多個(gè)選項(xiàng)。這一點(diǎn)和標(biāo)簽中單選框和多選框使用上相似，只是形式不同。7.3 下拉菜單select/option19上一頁下一頁目 錄結(jié) 束本 節(jié) 標(biāo)簽是成對(duì)標(biāo)簽，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是一個(gè)下拉式菜單的內(nèi)容。 標(biāo)簽必須與標(biāo)簽配套使用，標(biāo)簽用于定義下拉菜單中的各個(gè)選項(xiàng)。標(biāo)簽有name、size和multiple三個(gè)屬性。 其中name屬性用于指定下拉菜單的名字。 size

13、屬性是可選的，用于定義菜單的長度。size屬性的參數(shù)值是數(shù)字，表示顯示在菜單中的選項(xiàng)數(shù)目。當(dāng)size屬性的參數(shù)值小于列表框中的列表項(xiàng)數(shù)目時(shí)，瀏覽器會(huì)為該菜單添加滾動(dòng)條，用戶可以使用滾動(dòng)條來查看所有的選項(xiàng)。szie屬性的缺省值為1。 multiple屬性用于預(yù)選多個(gè)選項(xiàng)。7.3.1 select標(biāo)簽20上一頁下一頁目 錄結(jié) 束本 節(jié) 標(biāo)簽用來定義菜單中的選項(xiàng)。標(biāo)簽是單標(biāo)簽，它必須嵌套在標(biāo)簽中使用。一個(gè)菜單中有幾個(gè)選項(xiàng)，就要有幾個(gè)標(biāo)簽與之相對(duì)應(yīng)，選項(xiàng)的具體內(nèi)容寫在每個(gè)之后。標(biāo)簽有兩個(gè)屬性：value和selected，它們都是可選的。其中value屬性的參數(shù)值是當(dāng)該項(xiàng)被選中并提交后，Web瀏覽器傳

14、送給服務(wù)器的數(shù)據(jù)。缺省時(shí)，瀏覽器將傳送選項(xiàng)的內(nèi)容。selected屬性用來指定選項(xiàng)的初始狀態(tài)，表示該選項(xiàng)在初始時(shí)是被選中的。若在標(biāo)簽中設(shè)定multiple屬性的話，可以在多個(gè)標(biāo)簽中帶有selected屬性，即同時(shí)多個(gè)選項(xiàng)被預(yù)選。7.3.2 option標(biāo)簽21上一頁下一頁目 錄結(jié) 束本 節(jié) 用標(biāo)簽可以來定義高度超過一行的文本輸入框。標(biāo)簽是成對(duì)標(biāo)簽，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是顯示在文本輸入框中的初始信息。標(biāo)簽有3個(gè)屬性：name、rows和cols。其中name屬性用于指定文本輸入框的名字。 cols屬性用于規(guī)定文本輸入框的寬度。屬性的參數(shù)值是數(shù)字，表示一行所能顯示的最大字符數(shù)。如果輸入信息中

15、有一行或幾行的字符數(shù)大于cols屬性的參數(shù)值，瀏覽器會(huì)為該文本輸入框添加水平滾動(dòng)條。 rows屬性用于規(guī)定文本輸入框的高度。屬性的參數(shù)值是數(shù)字，表示該文本輸入框所占的行數(shù)。瀏覽器會(huì)自動(dòng)為高度超過一行的文本輸入框添加垂直滾動(dòng)條。但是當(dāng)輸入信息的行數(shù)小于或等于rows屬性的參數(shù)值時(shí)，滾動(dòng)條將不起作用。7.4 多行文本框textarea22上一頁下一頁目 錄結(jié) 束本 節(jié) 要想在網(wǎng)頁中真正指揮表單的作用，就要使用CGI程序，因此先來認(rèn)識(shí)一下CGI程序的概念。7.5 表單在網(wǎng)頁中的應(yīng)用7.5.1 CGI程序的概念 簡單地說，CGI是服務(wù)器和HTML文件之間的接口程序，它負(fù)責(zé)處理HTML文件與運(yùn)行在服務(wù)器

16、中程序之間的數(shù)據(jù)交換。它可以是一個(gè)已編譯的程序，或是一個(gè)批處理文件，或任何可以執(zhí)行的二進(jìn)制文件。CGI與服務(wù)器交互的流程如圖8.9所示。23上一頁下一頁目 錄結(jié) 束本 節(jié) CGI程序與服務(wù)器交互的流程24上一頁下一頁目 錄結(jié) 束本 節(jié) 首先在瀏覽器發(fā)出請(qǐng)求，既瀏覽者輸入查詢條件，這一請(qǐng)求就像對(duì)任意一個(gè)URL的訪問請(qǐng)求一樣被傳送到服務(wù)器，服務(wù)器接收到這一請(qǐng)求后，根據(jù)請(qǐng)求中提供的文件名到CGI-BIN子目錄中去執(zhí)行CGI程序，這個(gè)CGI程序也許是計(jì)算一個(gè)值，或者是調(diào)用系統(tǒng)下的某個(gè)程序，該程序?qū)?zhí)行結(jié)果返回給CGI程序，CGI程序又將結(jié)果轉(zhuǎn)換成網(wǎng)頁服務(wù)器能識(shí)別的HTML格式，Web服務(wù)器再將HTML

17、格式表達(dá)的數(shù)據(jù)返回給提出請(qǐng)求的Web瀏覽器，經(jīng)瀏覽器對(duì)HTML格式返回的數(shù)據(jù)進(jìn)行處理后，就是呈現(xiàn)于面前的CGI執(zhí)行結(jié)果了。 25上一頁下一頁目 錄結(jié) 束本 節(jié) 實(shí)現(xiàn)CGI程序交互式訪問是網(wǎng)頁編寫的最高階段，要求很高，除了需要熟悉HTML以外，還需要熟悉網(wǎng)頁服務(wù)器所駐留主機(jī)的操作系統(tǒng)以及操作系統(tǒng)所支持的某種語言。同時(shí)，編寫CGI程序之前，必須要求系統(tǒng)管理員開放對(duì)CGI-BIN目錄的訪問權(quán)?；谶@些原因，一般網(wǎng)頁很少使用CGI，當(dāng)然，當(dāng)你的網(wǎng)頁很龐大時(shí)，必然要用到CGI。幸運(yùn)的是，在Internet上，到外都有現(xiàn)成的CGI程序、你只管下載使用就是了。所以，這里只教如何在HTML中加入CGI程序，至于如何編寫CGI程序，請(qǐng)參考