第08章 表單的設(shè)計.ppt

1、第8章西餐設(shè)計，8.1標記8.2標記8.3下拉菜單select/option 8.4多行文本框textarea 8.5西餐網(wǎng)頁應(yīng)用程序節(jié)目，上一頁，下一頁，目錄，結(jié)束，牙齒部分，8.2標記，8.2.1文本框文本8.2.2提交按鈕submitHTML使用西餐(Form)設(shè)計交互界面?！拔鞑汀笔侵附邮芫W(wǎng)頁內(nèi)訪問者的動作，這些動作傳遞到服務(wù)器內(nèi)的節(jié)目(如CGI節(jié)目)，包括動態(tài)、輸入框和按鈕。通過使用表格和CGI程序，網(wǎng)頁可以知道瀏覽的人做了什么，對這些事情做出適當?shù)姆磻?yīng)，網(wǎng)頁進行交互。牙齒章節(jié)的內(nèi)容是使用表單和CGI程序告訴自己的網(wǎng)頁和網(wǎng)頁瀏覽者如何進行徐璐溝通。上一頁、下一頁、目錄、結(jié)尾、牙齒部分

2、、西餐標簽是標簽對，第一個標簽和結(jié)束標簽之間的內(nèi)容是表單。西餐表單在具有明確文本提示的表單中創(chuàng)建表單，以便訪問者可以在表單中輸入自己的信息，然后使用提交按鈕將瀏覽器中的信息傳遞到服務(wù)器。西餐form中的HTML代碼執(zhí)行兩個茄子操作。一個表示CGI的路徑和名稱，另一個表示將在表單中輸入的信息傳遞給CGI。關(guān)于CGI的概念，我們在下一節(jié)中會說，讀者只需把它當作在服務(wù)器上運行的應(yīng)用程序即可。8.1標記、上一頁、下一頁、目錄、結(jié)尾、牙齒部分和HTML中form的語法結(jié)構(gòu)如下：標簽具有兩個茄子屬性：action和method。上一頁、下一頁、目錄、退出、牙齒部分、1action屬性WWW使用客戶/服務(wù)器

3、工作方式。瀏覽器端接收的用戶反饋將傳遞到網(wǎng)頁伺服器，由相應(yīng)的處理程序處理。Action屬性用于指示與表單對應(yīng)的處理函數(shù)的位置。參數(shù)值是程序的URL。目前，由于服務(wù)器端的處理程序更多，因此action屬性指定了牙齒form牙齒應(yīng)運行的CGI節(jié)目的名稱。通常，處理用戶反饋信息的節(jié)目CGI程序位于網(wǎng)頁伺服器CGI-BIN目錄下。用戶提交輸入信息后，啟動服務(wù)器牙齒程序完成查詢操作。上一頁、下一頁、目錄、退出、牙齒節(jié)和2method屬性method屬性指定表單的工作方式。屬性的參數(shù)值為get和post，默認方法為get。值為get時，表單主要從服務(wù)器獲取信息，因此傳遞給服務(wù)器的反饋消息長度不能超過255

4、個字符。值為post表示表單主要發(fā)送到服務(wù)器消息，服務(wù)器反饋長度沒有限制。僅使用牙齒標簽很難完成用戶信息輸入。在的開始和結(jié)束標記之間，除了前面介紹的標記外，還存在三個茄子特殊標記：input、select和textarea。現(xiàn)在一起學習吧。上一頁、下一頁、目錄、結(jié)束、牙齒部分、8.2標記是單個標記，沒有結(jié)束標記。必須嵌套在西餐標記中以定義用戶輸入。標簽具有6個茄子屬性：type、name、size、value、maxlength和checked。其中name和type是兩個茄子必需的屬性。Name屬性的參數(shù)值是該處理程序的變量名，網(wǎng)頁伺服器將牙齒輸入信息的值賦給name屬性規(guī)定的變量。Type

5、屬性用于指定牙齒項目提供的輸入方法。也就是說，它指示瀏覽器輸入的值的類型。標記格式略有不同，其他5茄子屬性的含義取決于類型類型。Type有9種茄子類型：text、password、radio、checkbox、submit、reset、image、hidden和file。上一頁、下一頁、目錄、結(jié)束、牙齒部分，如果類型為文本，則表示該項的輸入信息為字符串。瀏覽器現(xiàn)在顯示一個文本框，用戶可以在其中輸入信息。牙齒文本框是只能輸入一行文本的輸入框。Type=text時，標記除了具有不能設(shè)置為默認值的兩個茄子屬性name和Type外，還具有三個茄子可選屬性：value、size和maxlength。1s

6、ize屬性：用于指定文本框的長度。默認值為20(字節(jié))。2value屬性：設(shè)置文本框中預(yù)先顯示的內(nèi)容。3maxlength屬性：指示文本框用戶可以輸入的最大字符數(shù)。牙齒值始終等于或大于size屬性的參數(shù)值。如果輸入的字符數(shù)超過了文本框長度，可以移動光標以查看部分或更多內(nèi)容。8.2.1文本框文本、上一頁、下一頁、目錄、退出、牙齒部分、8.2.2提交按鈕submit和重置按鈕reset，type=submit將在該位置生成瀏覽器，用戶單擊按鈕時，瀏覽器將表單的輸入信息傳遞到服務(wù)器。您可以將提交按鈕的name屬性設(shè)置為默認值。除了Name屬性外，還有可選屬性value，用于指定在提交按鈕上顯示的文本

7、。Value屬性的默認值為提交查詢內(nèi)容。表單必須包含“提交”按鈕。否則，無法傳遞服務(wù)器信息。如果Type=reset，瀏覽器將在該位置生成重置按鈕。當用戶單擊執(zhí)行牙齒按鈕時，瀏覽器清除表單中的所有輸入信息，并返回到初始狀態(tài)。您還可以將重置按鈕的name屬性設(shè)置為默認值。除了Name屬性外，還有可選屬性value，用于指定要在清除按鈕上顯示的文本。值屬性的默認值為“重置”。通常，“提交”和“重置”按鈕應(yīng)同時出現(xiàn)。上一頁、下一頁、目錄、退出、牙齒部分、8.2.3密碼框password和password類型與text類型非常相似。但是，如果瀏覽器輸入內(nèi)容時未顯示輸入的內(nèi)容，并且星號、上一頁、下一頁、

8、目錄、退出、牙齒部分、8.2.4單選框radio，type=radio，則表明項目是單個選項。單一選項必須是唯一的。也就是說，用戶只能選擇表單中所有單個選項中的一個作為輸入信息。因此，所有屬性name必須具有相同的值，但屬性value的值必須不同。其中，checked屬性用于指定最初選擇選項。上一頁、下一頁、目錄、退出、牙齒部分，如果type=checkbox，則指示項目是復(fù)合選項。用戶可以同時從表單中選擇一個或多個復(fù)合選項作為輸入信息。由于有多個選擇，因此屬性name必須具有不同的值。屬性value的參數(shù)值是選擇并提交項，然后web瀏覽器將其作為服務(wù)器數(shù)據(jù)傳遞。因此，value屬性的參數(shù)值必

9、須與選項內(nèi)容相同或幾乎相同，并且是必需的屬性。Checked屬性指定最初選擇牙齒選項。8.2.5復(fù)選框如果checkbox、上一頁、下一頁、目錄、退出、牙齒部分、type=image，則瀏覽器在該位置創(chuàng)建圖像按鈕，并且用戶單擊按鈕時，瀏覽器需要服務(wù)器圖像類型的src屬性以獲取表單的輸入信息。牙齒屬性用于設(shè)置圖像文件的路徑。圖像按鈕中也提供了圖像標簽中使用的許多屬性規(guī)定。8.2.6圖像按鈕圖像、上一頁、下一頁、目錄、結(jié)尾、牙齒部分和image=hidden表示瀏覽器窗口中不顯示條目。如果用戶不想在不顯示特定選項的情況下從文檔中刪除某個選項，則可以通過將這些選項中type屬性的參數(shù)值更改為hidd

10、en來實現(xiàn)此目的。8.2.7隱式框hidden、上一頁、下一頁、目錄、結(jié)尾、牙齒部分和檔案選擇輸入框在檔案上載程序中使用最廣泛。檔案選擇輸入框看起來很復(fù)雜，但在HTML中，您只需通過即可。8.2.8檔案選擇輸入框檔案、上一頁、下一頁、目錄、結(jié)尾、牙齒部分、表單中的和標記可以在瀏覽器中顯示帶有下拉菜單或滾動條的菜單。瀏覽器可以從菜單中選擇一個或多個選項。這類似于使用標簽的單選框和多選框，但格式不同。8.3下拉菜單選擇/選項、上一頁、下一頁、目錄、結(jié)尾、牙齒部分、標記是標記對，第一個和結(jié)束標記之間的內(nèi)容是下拉菜單的內(nèi)容。標簽必須與定義下拉菜單各個選項的標簽一起使用。標簽有三個茄子屬性：name、s

11、ize和multiple。其中，name屬性用于命名下拉菜單。Size屬性是可選的，用于定義菜單的長度。Size屬性的參數(shù)值是一個數(shù)字，指示菜單中顯示的選項數(shù)。如果Size屬性的參數(shù)值小于列表框中列表項的數(shù)量，瀏覽器會向菜單中添加滾動條，用戶可以使用滾動條查看所有選項。Szie屬性的默認值為1。Multiple屬性用于預(yù)先選擇多個選項。8.3.1 select標簽、上一頁、下一頁、目錄、結(jié)尾、牙齒部分和標簽定義菜單中的選項。標記是嵌套在標記中必須使用的單個標記。菜單包含幾個茄子選項。應(yīng)該有一些對應(yīng)的標簽。選項的具體內(nèi)容寫在每個后面。(David aser，Northern Exposure(美

12、國電視電視劇)，菜單)標簽中有兩個茄子屬性：value和selected，都是可選的。其中，value屬性的參數(shù)值是選擇并提交項時web瀏覽器傳遞給服務(wù)器數(shù)據(jù)的值。默認情況下，瀏覽器傳遞選項的內(nèi)容。Selected屬性指定選項的初始狀態(tài)。這表示最初選擇了該選項。在標簽中設(shè)置multiple屬性允許多個標簽具有selected屬性。也就是說，可以同時預(yù)先選擇多個選項。8.3.2可選標記、上一頁、下一頁、目錄、結(jié)尾和牙齒部分使用標記定義高度超過兩行的文本輸入框。標簽是標簽對，第一個標簽和結(jié)束標簽之間的內(nèi)容是顯示在文本輸入框中的原始描述。標簽有三個茄子屬性：name、rows和cols。其中，nam

13、e屬性用于命名文本輸入框。Cols屬性用于指定文本輸入框的寬度。屬性的參數(shù)值是一個數(shù)字，指示一行可以顯示的最大字符數(shù)。如果輸入信息的一行或多行字符大于cols屬性的參數(shù)值，瀏覽器會在文本輸入框中添加水平滾動條。Rows屬性指定文本輸入框的高度。屬性的參數(shù)值是一個數(shù)字，指示文本輸入框占用的行數(shù)。瀏覽器自動將垂直滾動條添加到高度超過兩行的文本輸入框中。但是，如果輸入信息的行數(shù)小于或等于rows屬性的參數(shù)值，則滾動條不起作用。8.4多行文本框textarea、上一頁、下一頁、目錄、結(jié)尾、牙齒部分、網(wǎng)頁中真正的指揮表單，需要使用CGI程序，因此首先了解CGI程序的概念。網(wǎng)頁8.5西餐應(yīng)用程序節(jié)目，8.

14、5.1 CGI程序的概念，簡而言之，CGI是服務(wù)器和HTML檔案之間的介面程序，用于處理HTML文件和服務(wù)器的節(jié)目之間的數(shù)據(jù)交換。可以是編譯后的節(jié)目、批處理任務(wù)檔案或任何可運行的二進制文件。CGI和服務(wù)器之間的交互過程如圖8.9所示。、上一頁、下一頁、目錄、退出、牙齒部分、CGI程序和服務(wù)器之間的交互進程、上一頁、下一頁、目錄、退出、牙齒部分、首先在瀏覽器中發(fā)出請求，瀏覽器輸入查詢條件，牙齒請求等于訪問所有URL。根據(jù)請求中提供的檔案名稱，在CGI-BIN子目錄中運行CGI程序。牙齒CGI程序可以調(diào)用系統(tǒng)下計算值或?qū)⑦\行結(jié)果返回到CGI程序的程序。CGI程序?qū)⒔Y(jié)果轉(zhuǎn)換為可識別網(wǎng)頁服務(wù)器的HTML格式，網(wǎng)頁伺服器將以HTML格式表示的數(shù)據(jù)返回到請求的web瀏覽器。上一頁、下一頁、目錄、退出、牙齒部分和實施CGI節(jié)目交互式訪問是創(chuàng)建網(wǎng)頁的最高步驟，并且要求很高。不僅要熟悉HTML，還要熟悉網(wǎng)頁服務(wù)器駐留主機的操作系統(tǒng)和操作系統(tǒng)支持語言。此外，在編寫CGI程序之前，必須系統(tǒng)管理員公開對CGI-BIN目錄的訪問。為此，普通網(wǎng)頁很少使用CGI，當然，如果你的網(wǎng)頁很大，就應(yīng)該使用CGI。幸運的是，在互聯(lián)網(wǎng)上，有現(xiàn)成的CGI程序，你只能下載和使用。因此，此處僅教授如何將CGI程序添加到HTML，有關(guān)如何編