1、第5章 表單當(dāng)希望從訪問站點的用戶處收集信息時，通常需要使用表單。您很可能已經(jīng)在不同的Web站點上使用多種不同類型的表單，從簡單的搜索框（它允許用戶輸入關(guān)鍵字以找到所需要的內(nèi)容）到復(fù)雜的表單（例如在線訂購食品或預(yù)訂度假的表單）。Web上的表單與需要填寫的紙張表單非常類似。紙張上具有輸入文本的區(qū)域、選中的方框、一些可供選擇的選項等。在Web上，可以通過組合一些表單控件（例如用于輸入文本的文本框、用于選中的復(fù)選框、選項框和單選按鈕等）來創(chuàng)建表單。在本章中將介紹如何將每一種類型的控件組合到表單中。本章將介紹以下內(nèi)容：l 使用元素創(chuàng)建表單的方式l 可以用于建立表單的不同類型表單控件例如文本輸入框、單選

2、按鈕、選項框和提交按鈕l 處理用戶輸入的數(shù)據(jù)的方式l 使表單具有更好的可訪問性的方式l 結(jié)構(gòu)化表單的內(nèi)容的方式學(xué)習(xí)完本章之后，您將能夠創(chuàng)建所有類型的表單，以便從站點訪問者處收集信息。注意：對所收集數(shù)據(jù)的處理方式依賴于Web站點所駐留的服務(wù)器。XHTML只用于向用戶提供表單；它不允許用戶說明如何處理所收集的數(shù)據(jù)。為了更好地了解如何處理通過表單收集的數(shù)據(jù)，請查看關(guān)于服務(wù)器端語言(例如ASP.net、PHP或JSP)的書籍?？稍赪站點列出的書籍中查看關(guān)于這些主題的書籍。5.1 表單簡介創(chuàng)建的任何表單都將位于元素中。在起始標(biāo)簽和結(jié)束標(biāo)簽之間，存在一些表單控件（文本輸入框、下拉框、復(fù)選框、

3、提交按鈕等）。類似于頁面的其他元素，元素中也可以包含其他XHTML標(biāo)記。用戶向表單中輸入數(shù)據(jù)之后，通常需要單擊提交按鈕（但是按鈕上的實際文本可能是其他內(nèi)容，例如Search、Send或Proceed并且通常按下Enter鍵會具有類似于單擊該按鈕的相同效果）。這表明用戶已經(jīng)填寫完表單，并且通常將表單數(shù)據(jù)發(fā)送給Web服務(wù)器。當(dāng)訪問者所輸入的數(shù)據(jù)到達(dá)服務(wù)器之后，某個腳本或者其他程序通常會處理它們，并向訪問者返回一個新Web頁面。返回的頁面通常響應(yīng)訪問者所提出的請求，或者確認(rèn)訪問者執(zhí)行的操作。作為一個示例，您可能希望在頁面中添加一個如圖5-1所示的搜索表單。圖5-1這個表單包含了一個文本框，用戶可以在

4、其中輸入一些關(guān)鍵字以搜索希望找到的內(nèi)容；另外包含一個提交按鈕，該按鈕上具有單詞“Search”。當(dāng)用戶單擊Search按鈕時，信息被發(fā)送到服務(wù)器。然后服務(wù)器處理數(shù)據(jù)，并為用戶生成一個新頁面，該頁面面告訴用戶哪些頁面滿足搜索標(biāo)準(zhǔn)（如圖5-2所示）。圖5-2當(dāng)用戶填好一個表單后，數(shù)據(jù)以“名/值”對的形式發(fā)送給服務(wù)器，名字對應(yīng)于表單控件的名稱，值是用戶輸入的內(nèi)容（如果用戶可以輸入一個答案）或者選擇的選項值（如果表單上存在一個選項列表）。每一項都必須具有一個名稱和一個值，因為如果在一個表單上有5個文本框，則需要知道哪一個數(shù)據(jù)對應(yīng)哪一個文本框。然后處理應(yīng)用程序才能分別處理每一個表單控件中的信息。下面是圖

5、5-1所示的簡單搜索表單的代碼： Search the site 其中元素附帶了一個稱為action的屬性，它的值是Web服務(wù)器中處理搜索請求的頁面的URL。同時，method屬性指明服務(wù)器使用哪一個HTTP方法將表單數(shù)據(jù)發(fā)送給服務(wù)器(在本章后面，您將了解到可以使用兩個方法get和post)。在本章后面將介紹一些更高級的表單，但是現(xiàn)在首先詳細(xì)地查看組成表單的元素。5.2 利用元素創(chuàng)建表單表單通常位于一個稱為的元素中。元素還能包含其他標(biāo)記，例如段落、題頭等。但是，元素絕對不能包含其他元素。假設(shè)頁面中的元素相互獨立（任何元素都不包含其他元素），則頁面中可以包含任意數(shù)量的表單。例如，可以在同一個頁面

6、中包含登錄表單、搜索表單、用于訂閱時事通訊的表單等。如果一個頁面中有多個表單，則用戶一次只能向服務(wù)器發(fā)送一個表單中的數(shù)據(jù)。每一個元素應(yīng)該至少附帶兩個屬性：action method元素也可以附帶所有的通用屬性、UI事件屬性以及下面的屬性：enctype accept accept-charset onsubmit onreset5.2.1 action屬性action屬性表明提交表單時將如何處理數(shù)據(jù)。通常action屬性的值是Web服務(wù)器中的一個頁面或者一個程序，當(dāng)用戶單擊提交按鈕后，該頁面或程序?qū)⒔邮毡韱沃械男畔?。例如，如果具有一個由“用戶名”和“密碼”組成的登錄表單，用戶所輸入的內(nèi)容將被傳

7、遞給Web服務(wù)器中以ASP.net語言編寫的login.aspx頁面，此時action屬性將如下所示：大多數(shù)瀏覽器將只接受作為action屬性值的以http:/開頭的URL。5.2.2 method屬性將表單數(shù)據(jù)發(fā)送給服務(wù)器的方式有兩種，每一種對應(yīng)于一個HTTP方法：l get方法，它將數(shù)據(jù)作為URL的一部分進(jìn)行發(fā)送l post方法，它將數(shù)據(jù)隱藏在HTTP頭中在本章的后面將詳細(xì)介紹這兩個方法，其中您將了解到它們的意義以及何時應(yīng)當(dāng)使用哪一個方法。5.2.3 id屬性id屬性允許用戶唯一標(biāo)識頁面中的元素，如同可以使用該屬性唯一標(biāo)識頁面中的任何元素一樣。為每一個元素提供一個id屬性是優(yōu)秀的實踐，因為

8、許多表單利用樣式表和腳本，它們需要使用id屬性來標(biāo)識表單。注意：在第12章中將介紹，如果自動將瀏覽器的光標(biāo)放置在表單的第一個文本框中，有時會對用戶有幫助作用。為此，需要添加一個id或name屬性以標(biāo)識表單。在一個文檔中，id屬性的值應(yīng)該是唯一的，它也應(yīng)該遵循第1章中提到的一些其他規(guī)則。有些人以字符frm作為表單的id屬性或name屬性值的起始字符，然后使用該值的剩余部分描述表單所收集數(shù)據(jù)的類型，例如frmLogin或frmSearch。5.2.4 name屬性（逐漸淘汰）類似于在其他元素中的用法，name屬性是id屬性的前身。與id屬性一樣，name屬性的值在文檔中應(yīng)該是唯一的。另外，該屬性的

9、值通常以字符frm作為開頭，后面跟上表單的目的。5.2.5 onsubmit屬性您很可能遇到過這樣的情況：在Web站點中填寫完表單，然后單擊發(fā)送表單數(shù)據(jù)的按鈕（甚至在將頁面發(fā)送給服務(wù)器之前就執(zhí)行該操作），此時將會顯示一條消息告訴您沒有輸入某些數(shù)據(jù)或者輸入錯誤的數(shù)據(jù)。當(dāng)這種情況發(fā)生時，您很可能是遇到了使用onsubmit屬性的表單，該屬性在瀏覽器中運行一段腳本，在表單被發(fā)送給服務(wù)器之前檢查所輸入數(shù)據(jù)的正確性。當(dāng)用戶單擊提交按鈕時，將會激活一個事件。這類似于瀏覽器舉起它的手并說“嘿，我正向服務(wù)器發(fā)送這個表單的數(shù)據(jù)?！彪[藏在這些事件背后的思想是，可以在將數(shù)據(jù)發(fā)送給服務(wù)器之前運行一個腳本（例如Java

10、Script腳本），以確保提交的數(shù)據(jù)的質(zhì)量和準(zhǔn)確性。onsubmit屬性的值應(yīng)該是一個腳本函數(shù)，當(dāng)事件激活時將使用該函數(shù)。因此，元素中的onsubmit屬性可能類似于如下：onsubmit=validateFormDetails ( ); 在文檔中必須已經(jīng)定義了validateFormDetails()函數(shù)（很可能在元素中定義它）。因此，當(dāng)用戶單擊提交按鈕時，將調(diào)用并運行這個函數(shù)。在表單數(shù)據(jù)發(fā)送給服務(wù)器之前對其進(jìn)行一些檢查具有如下兩個關(guān)鍵優(yōu)點：l 如果頁面中的數(shù)據(jù)存在錯誤，用戶不需要花費額外的時間等待頁面被發(fā)送給服務(wù)器然后返回。l 服務(wù)器不需要處理大量的錯誤檢查，因為已經(jīng)在瀏覽器端執(zhí)行檢查。這

11、兩個優(yōu)點都將節(jié)省服務(wù)器的工作，對于非常繁忙的站點來說，這一點非常重要。5.2.6 onreset屬性某些表單包含一個reset按鈕，它能夠清空表單中的所有內(nèi)容，有時該按鈕上顯示的可能是類似于clear Form(清除表單)的文本；當(dāng)按下這個按鈕時，將激活onreset事件，并且運行相應(yīng)的腳本。當(dāng)使用onreset屬性時，它的值是一個腳本（與onsubmit屬性一樣），當(dāng)用戶單擊調(diào)用該腳本的按鈕時執(zhí)行它。注意：onreset事件和屬性的使用頻率遠(yuǎn)低于onsubmit。然而，如果在頁面中提供一個ClearForm按鈕，最好在用戶計劃清除表單之前執(zhí)行確認(rèn)操作，以防止用戶無意中按下該按鈕。5.2.7

12、enctype屬性如果使用HTTP post方法向服務(wù)器發(fā)送數(shù)據(jù)，則在向服務(wù)器發(fā)送數(shù)據(jù)之前可以使用enctype屬性指定瀏覽器編碼數(shù)據(jù)的方式（以確保數(shù)據(jù)安全到達(dá)）。瀏覽器支持兩種類型的編碼方式：l application/x-www-form-urlencoded，這是大多數(shù)表單使用的標(biāo)準(zhǔn)方法。使用該編碼方式的原因是某些字符（例如空格、加號和某些其他非字母數(shù)字字符）不能發(fā)送給Web服務(wù)器。相反，它們被用于表示它們的其他字符所替代。l multipart/form-data，這種方式允許將數(shù)據(jù)以多個部分的方式發(fā)送，每個連續(xù)的部分對應(yīng)于一個表單控件，發(fā)送順序按照它們在表單中的出現(xiàn)順序。每個部分可以

13、具有一個可選的“內(nèi)容-類型”頭，以指明該表單控件的數(shù)據(jù)類型。如果沒有使用這個屬性，則瀏覽器將使用第一種編碼方式。因此，如果表單允許用戶向服務(wù)器上傳文件（例如一幅圖像），或者需要向服務(wù)器發(fā)送非ASCII字符，則必須使用這個屬性，此時該屬性被賦予第二個值：enctype=multipart/form-data “5.2.8 accept-charset屬性accept-charset屬性的思想是，它指定一個字符編碼列表（用戶可以輸入該列表），然后服務(wù)器可以根據(jù)該列表進(jìn)行處理。但是，IE 7和Firefox 2瀏覽器不支持這個屬性。該屬性的值應(yīng)該是以空格或者逗號隔開的字符集列表（附錄E中介紹了各種字

14、符集）。例如，下面的代碼指示服務(wù)器接受UTF-8編碼：accept-charset=UTF-8當(dāng)前主要的瀏覽器允許輸入任何字符集。5.2.9 accept屬性accept屬性類似于accept-charset屬性，不同之處是它采用一個以逗號隔開的內(nèi)容類型（或文件類型）列表，服務(wù)器可以利用該列表處理表單。但是，IE 7和Firefox 2瀏覽器不支持這個屬性。該屬性的思想是用戶不能上傳與列表中所列舉的內(nèi)容類型不同的文件。下面的代碼表明用戶僅能上傳GIF或JPEG類型的圖像：accept=image/gif,image/jpg但是，當(dāng)前主要的瀏覽器仍然允許用戶上傳任何類型的文件。附錄H中列舉了一些

15、MIME類型。5.2.10 target屬性target屬性通常用于元素中，以指明新的頁面將被加載到哪一個框架或者瀏覽器窗口中。它也操作生成新頁面的表單，并且允許用戶指明當(dāng)提交表單時生成的頁面被加載到哪一個框架或者瀏覽器窗口中。5.2.11 空白和元素另外需要注意的是，當(dāng)瀏覽器遇到元素時，它通常會在該元素周圍創(chuàng)建一些額外的空白。這將影響您的設(shè)計，特別是希望將表單放置于較小的區(qū)域中時，例如將搜索表單放置在菜單欄中。如果利用CSS無法在目標(biāo)瀏覽器中解決這個問題，則避免該問題的唯一方法是仔細(xì)放置元素。為了避免創(chuàng)建額外的空白，可以嘗試將元素放置在文檔的起始部分或者末尾附近：如果在Transitiona

16、l XHTML 1.O文檔中使用表進(jìn)行布局，則可以將元素放置在元素和元素之間（需要清楚的是，后一種方法是一種欺騙方式，因此如果對頁面進(jìn)行驗證，該方法可能會造成錯誤。但是，大多數(shù)瀏覽器仍將以期望的方式顯示表和表單）。5.3 表單控件本節(jié)將介紹一些不同類型的表單控件，可以利用它們從站點訪問者處收集數(shù)據(jù)。本節(jié)主要介紹以下控件：l 文本輸入控件l 按鈕l 復(fù)選框和單選按鈕l 選項框（有時稱為下拉菜單）和列表框l 文件選擇框l 隱藏控件5.3.1 文本輸入您必定在許多Web頁面中見到過文本輸入框。最著名的文本輸入框可能是Google主頁中間靠右的文本輸入框，它允許用戶輸入想要搜索的關(guān)鍵字。在一個打印表單

17、中，文本輸入框的等價物是一個方框或者下劃線，用戶可以在其中或其上填寫相應(yīng)的內(nèi)容。實際上，表單中可以使用3種類型的文本輸入框：l 單行文本輸入控件：用于僅需要一行用戶輸入的項，例如搜索框或者e-mail地址。利用元素可以創(chuàng)建單行文本輸入控件。l 密碼輸入控件：這種控件類似于單行文本輸入控件，不同之處是它能夠掩藏用戶輸入的字符，因而無法在屏幕中看到用戶輸入的字符。這種控件趨向于以星號或者圓點代替用戶輸入的每一個字符，從而其他人無法通過簡單地查看屏幕來了解用戶的輸入。密碼輸入控件主要用于在登錄表單中輸入密碼或者某些敏感內(nèi)容，例如信用卡號。密碼輸入控件的創(chuàng)建方式也是使用元素。l 多行文本輸入控件：當(dāng)要

18、求用戶輸入的文本長度大于單個句子時，可以使用該控件。利用元素創(chuàng)建多行文本輸入控件。1.單行文本輸入控件利用元素可以創(chuàng)建單行文本輸入控件，此時該元素的type屬性的值設(shè)置為text。下面是單行文本輸入控件用作搜索框的簡單示例(ch05_eg02.html)： Search: 圖5-3給出了這個表單在瀏覽器中的外觀。圖5-3注意：類似于一些人習(xí)慣以frm作為表單名稱的起始字符，也經(jīng)常使用txt作為文本框名稱的起始字符，以指明該表單控件是一個文本框。當(dāng)在服務(wù)器中處理數(shù)據(jù)時，這種方式特別方便，因為它有助于用戶了解什么類型的表單控件發(fā)送該數(shù)據(jù)。表5-1列舉了元素用于創(chuàng)建文本輸入控件時可以附帶的屬性。注意

19、，這個元素的name屬性的目的非常特別，與前面遇到的其他元素不同。表5-1屬 性目 的type指示希望創(chuàng)建的輸入控件的類型。當(dāng)希望創(chuàng)建單行文本輸入控件時，該屬性的值是text。這個屬性是必須的，因為元素也用于創(chuàng)建其他類型的表單控件，例如單選按鈕和復(fù)選框name用于提供“名值”對（“名值”對發(fā)送給服務(wù)器，表示每個表單控件和用戶輸入的值中的名稱。每一個控件需要一個名稱，以便與其相關(guān)聯(lián)的值（值由用戶提供或者選擇）能夠在另一端單獨獲取。value為文本輸入控件提供一個初始值，當(dāng)表單加載時將在頁面中看到這個值。僅在用戶希望頁面加載時就在文本輸入控件中寫入一些內(nèi)容（例如提示用戶應(yīng)該輸入什么數(shù)據(jù)）時才使用這

20、個屬性；更多的時候，很可能將其設(shè)置為空size利用該屬性可以指定文本輸入控件的寬度，單位為字符。在前面的示例中，搜索框的寬度是20個字符。Size屬性不影響用戶能夠輸入的字符數(shù)（在前面的示例中，用戶可以輸入40個字符）；它只是指示輸入控件具有多少個字符寬。如果用戶輸入的字符數(shù)大于輸入控件的寬度，通過使用箭頭鍵可以向右或向左滾動字符maxlength通過該屬性可以指定能夠輸入到文本框中的最大字符數(shù)。通常輸入最大字符數(shù)之后，即使用戶按下更多的鍵盤鍵，也不會添加新的字符當(dāng)元素的type屬性的值為text時，它也可以附帶下面的屬性：l 所有的通用屬性l disabled、readonly、tabind

21、ex和accesskey，本章后面將介紹它們2.密碼輸入控件如果希望收集一些敏感數(shù)據(jù)，例如密碼和信用卡信息，應(yīng)當(dāng)使用密碼輸入控件。密碼輸入控件掩藏了用戶在屏幕上輸入的字符，方式是使用圓點或者星號替換這些字符。密碼輸入控件的創(chuàng)建方式與單行文本輸入控件基本相同，不同之處是它的元素的type屬性值被設(shè)置為password。下面的示例是一個登錄表單，它結(jié)合了一個單行文本輸入控件和一個密碼輸入控件(ch05_eg03.html): Username: Password: 注意：密碼輸入控件的名稱的起始字符通常是pwd，從而在服務(wù)器端處理數(shù)據(jù)時，可以知道所關(guān)聯(lián)的值來自于一個密碼輸入框。圖5-4給出了這個登

22、錄表單在瀏覽器中的外觀，此時用戶準(zhǔn)備開始在該表單中輸入內(nèi)容。圖5-4注意：雖然密碼在屏幕上是隱藏的，但它們?nèi)匀蛔鳛榧兾谋就ㄟ^Internet發(fā)送。為了確保它們的安全，應(yīng)當(dāng)在客戶端和服務(wù)器之間建立一條SSL連接。3.多行文本輸入控件如果希望允許站點訪問者輸入多行文本，應(yīng)該使用元素創(chuàng)建一個多行文本輸入控件。下面是一個多行文本輸入控件的示例，它用于從站點訪問者處收集反饋信息(ch05_eg04.html): Please tell us what you think of the site and then click submit: Enter your feedback here. 注意，元素內(nèi)

23、的文本沒有縮進(jìn)。起始標(biāo)簽和絳束標(biāo)簽之間的任何內(nèi)容都被視為如同在一個元素內(nèi)編寫，并且源文檔的任何格式都將被保留。如果單詞“Enter your feedback here”在代碼中被縮進(jìn)，則它們在瀏覽器中顯示的多行文本輸入控件內(nèi)也被縮進(jìn)。圖5-5給出了這個表單在瀏覽器中的外觀。圖5-5在圖5-5中，當(dāng)頁面加載時，起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本顯示在文本區(qū)域中。用戶在添加自己的文本之前可以刪除該文本，如果用戶沒有從文本框中刪除該文本，則當(dāng)提交表單時，它們將被發(fā)送給服務(wù)器。用戶通常只在元素中己經(jīng)寫入的文本后輸入文本，因此最好避免在該元素內(nèi)添加內(nèi)容，但仍然應(yīng)該具有起始標(biāo)簽和結(jié)束標(biāo)簽，否則一些較老的瀏覽器

24、可能無法正確顯示該元素。元素可以附帶表5-2中列舉的屬性。表5-2屬 性目 的name控件的名稱，它用于發(fā)送給服務(wù)器的“名值”對中rows用于指定的大小，它指示元素應(yīng)該具有的文本行數(shù)，從而對應(yīng)于它的高度cols用于指定的大??；此處該屬性指定文本框的寬度并表示列數(shù)，一列等于一個字符的平均寬度元素還可以附帶如下屬性：l 所有通用屬性l disabled、readonly、tabindex和accesskey，本章后面將介紹它們l UI事件屬性默認(rèn)情況下，當(dāng)用戶輸入的文本超出的寬度時，文本將換行到下一行（這意味著重新開始下一行文本，類似于文字處理軟件中對文本的操作），但是服務(wù)器接收文本時，仍然認(rèn)為它

25、們都在一行中。由于某些用戶期望句子能夠在屏幕中應(yīng)該換行的位置進(jìn)行換行，所以一些主要的瀏覽器也支持稱為wrap的額外屬性，該屬性允許用戶指示文本換行的方式。該屬性可能的值包括如下：l off(默認(rèn)值)，該值意味著如果用戶輸入文本占用的空間超出了允許的寬度，則在文本框中添加滾動欄，并且用戶必須通過滾動才能看到輸入的內(nèi)容。l virtual，意味著當(dāng)文本換行時，用戶將在新行中看到它。但是當(dāng)文本傳送到服務(wù)器時，所有的文本將在同一行中，除非用目戶按下Enter鍵，此時將該鍵處理為一個換行。l physical，意味著當(dāng)用戶看到文本從新行開始時，服務(wù)器接收的文本也將是如此。但是，wrap屬性并不是XHTM

26、L規(guī)范的一部分。5.3.2 按鈕按鈕通常用于提交表單，但是有時用于清除或者復(fù)位表單，甚至是用于觸發(fā)客戶端腳本（例如，在頁面內(nèi)的基本貸款計算器表單中，可以使用按鈕觸發(fā)一個腳本，該腳本能夠在不將數(shù)據(jù)發(fā)送給服務(wù)器的情況下計算應(yīng)該償還的款項）?？梢圆捎?種方式創(chuàng)建按鈕：l 使用元素，將其type屬性值設(shè)置為submit、reset或buttonl 使用元素，將其type屬性值設(shè)置為imagel 使用元素對于每一種不同的方法，按鈕的外觀將稍有不同。1.使用元素創(chuàng)建按鈕當(dāng)使用元素創(chuàng)建按鈕時，可以通過使用type屬性來指定按鈕的類型。type屬性可以采用如下值：l submit，創(chuàng)建能夠自動提交表單的按鈕l

27、 reset，創(chuàng)建能夠自動將表單控件復(fù)位為初始值的按鈕l button，創(chuàng)建用于在用戶單擊時觸發(fā)客戶端腳本的按鈕下面的示例演示了這3種類型的按鈕(ch05_eg05.html)： 圖5-6給出了這些按鈕在PC機器(Mac機器中顯示的按鈕將是標(biāo)準(zhǔn)Mac樣式)上的Firefox瀏覽器中的外觀。圖5-6表5-3給出了按鈕使用的屬性。表5-3屬 性目 的type用于指定按鈕的類型，可采用如下值之一：submit、reset或buttonname用于設(shè)置按鈕的名稱。如果同一個表單中具有多個按鈕，則僅需要向按鈕添加name屬性（在這種情況下，該屬性用于指出哪一個按鈕被單擊）。但是，使用該屬性以任何方式指明

28、按鈕執(zhí)行的操作則是優(yōu)秀的實踐value用于指定按鈕上顯示的文本。如果給定一個name屬性，則value屬性的值作為該表單控件的“名值”對的一部分發(fā)送給服務(wù)器。如果沒有給定值，則該按鈕沒有“名值”對發(fā)送size用于指定按鈕的寬度，單位為像素，但是Firefox 2和IE7瀏覽器不支持這個屬性onclick用于當(dāng)用戶單擊按鈕時觸發(fā)一個腳本；這個屬性的值是應(yīng)該運行的腳本當(dāng)按鈕獲得或丟失焦點時，利用onfocus或onblur事件屬性可以觸發(fā)一個腳本，其方式與在用戶單擊按鈕時觸發(fā)腳本相同。當(dāng)元素的type屬性值為submit、reset或button時，它也可以采用如下屬性：，l 所有的通用屬性l d

29、isabled、readonly、tabindex和accesskey，本章后面將介紹它們l UI事件屬性如果提交按鈕不具有value屬性，則瀏覽器中所顯示的文本可能不適合于表單的目的例如，IE瀏覽器中顯示的文本為Send Query，這并不是登錄按鈕表單的理想文本。2.使用圖像作為按鈕可以使用圖像作為按鈕，而不是使用瀏覽器生成的標(biāo)準(zhǔn)按鈕。創(chuàng)建圖像按鈕的方式與創(chuàng)建其他按鈕的方式非常相似，不同之處是type屬性的值為image：注意：按鈕的name屬性值可以以字符btn開頭，以便遵循前面提到的命名約定（當(dāng)在其他代碼中引用表單控件的名稱時，使用這種前綴有助于讓用戶迅速獲知作為信息來源的表單控件的類

30、型）。因為創(chuàng)建的按鈕具有一幅圖像，所以需要具有兩個額外的屬性，如表5-4所示。表-54屬 性目 的src指定圖像文件的來源alt為圖像提供可選的文本。當(dāng)無法找到圖像時顯示該文本，該文本也對語音瀏覽器有所幫助（在IE 5和Netscape 6瀏覽器中才開始支持該屬性）如果圖像按鈕具有name屬性，當(dāng)單擊該按鈕時，瀏覽器將向服務(wù)器發(fā)送一個“名/值”對。名稱是用戶所提供的name屬性；值是一對x和y坐標(biāo)，它代表用戶所單擊的按鈕上的位置（類似于第3章中處理服務(wù)器端圖像映射時執(zhí)行的操作）。圖5-7中給出了一個圖形提交按鈕。當(dāng)用戶將鼠標(biāo)指針懸停在該按鈕上時，F(xiàn)irefox和IE瀏覽器將改變光標(biāo)的外觀以作為

31、該按鈕可用性的提示。圖5-73.使用元素創(chuàng)建按鈕元素是最近引入的元素，它允許用戶在起始標(biāo)簽和結(jié)束標(biāo)簽之間指定按鈕上顯示的文本。因此，可以在這兩個標(biāo)簽之間包含文本標(biāo)記或者圖像元素。在IE 4和Netscape 6瀏覽器中才開始支持該元素，但是支持該元素的瀏覽器也提供一種浮雕(或3D)效果的按鈕，當(dāng)單擊按鈕時將出現(xiàn)向上或向下移動的效果。下面是使用元素的一些示例(ch06_eg06.html)：SubmitClear this form I want to start again其中第一個提交按鈕只包含文本，第二個復(fù)位按鈕包含文本和其他標(biāo)記（以元素的形式），第三個提交按鈕包含一個元素。圖5-8給出了

32、這些按鈕在瀏覽器中的外觀。圖5-85.3.3 復(fù)選框復(fù)選框類似于紙張表單上必須選中的小方框。與電燈開關(guān)一樣，復(fù)選框可以是開狀態(tài)或者關(guān)狀態(tài)。當(dāng)復(fù)選框被選中時處于開狀態(tài)，用戶可以通過單擊復(fù)選框來切換開和關(guān)狀態(tài)。復(fù)選框可以單獨出現(xiàn)，每一個復(fù)選框具有自己的名稱；多個復(fù)選框可以以組的形式出現(xiàn)，它們共享同一個控件名稱并允許用戶為相同的特性選擇多個值。當(dāng)需要為用戶提供如下功能時，復(fù)選框是理想的表單控件：l 利用一個控件提供簡單的是或否響應(yīng)（例如接受一些條款和條件或者訂閱e-mail列表）l 從可能的選項的列表中選擇其中的幾項（例如讓用戶從給定列表中選擇他們具有的所有技能）l 可以使用元素創(chuàng)建復(fù)選框，將該元素

33、的type屬性值設(shè)置為checkbox。下面是幾個使用相同控件名稱的復(fù)選框的示例(ch05_eg07.html):Which of the following skills do you posess? Select all that apply. HTML XHTML CSS JavaScript ASP.Net PHP為了在本章中保持一致的表單元素命名約定，可以將復(fù)選框名稱的起始字符設(shè)置為chk。圖5-9給出了這個表單在瀏覽器中的外觀。注意，在每一個復(fù)選框后面有一個換行，這樣每一個復(fù)選框?qū)为氄加靡恍校ㄈ绻⑴欧胖脧?fù)選框，則用戶很可能不知道哪一個標(biāo)簽對應(yīng)于哪一個復(fù)選框）。圖5-9因為所有選

34、中的技能都將以“名/值”對的形式發(fā)送給處理應(yīng)用程序，所以如果有人選擇了多個技能，將有多個“名/值”對發(fā)送給服務(wù)器，并且它們共享相同的名稱。注意：處理具有相同名稱的多個復(fù)選框的方式取決于向服務(wù)器發(fā)送數(shù)據(jù)的方法。如果使用HTTP get發(fā)送數(shù)據(jù)，則選中的復(fù)選框?qū)⒆鳛椴樵冏址蠻RL的一部分發(fā)送。然而，如果使用HTTP post方法發(fā)送數(shù)據(jù)，則將獲得一個表示已選中選項的可遍歷數(shù)組。作為對比，下面是單個復(fù)選框，它提供簡單的是或否選項：I accept the terms and conditions.注意，創(chuàng)建這個復(fù)選框的元素沒有附帶value屬性。沒有附帶value屬性時，值是on。在這個示例中，

35、也有一個稱為checked的屬性，它的值是checked，用于指明當(dāng)面加載時該復(fù)選框已被選中。注意：在HTML4.1之前，可以提供不帶有值的checked屬性。這種過程稱為屬性最小化，附帶不具有值的checked屬性的元素被認(rèn)為是開狀態(tài)。在XHTML中，所有的屬性必須具有值，因此重復(fù)這些屬性的名稱作為它們的值。較老的瀏覽器可能會忽略該值，但是它們?nèi)匀粫_認(rèn)該屬性的存在。表5-5給出了type屬性值為checkbox的元素能夠附帶的屬性。表5-5屬 性目 的type指明希望創(chuàng)建的是復(fù)選框name賦予控件名稱。多個復(fù)選框可以共享相同的名稱，但前提是希望讓用戶從同一個列表中選擇多項此時，這些復(fù)選框應(yīng)

36、當(dāng)依次放置在表單中value如果復(fù)選框被選中，則該值將被發(fā)送給服務(wù)器checked指明當(dāng)頁面加載時復(fù)選框應(yīng)該被選中size指明復(fù)選框的大小，單位為像素（但在IE 7或Firefox 2瀏覽器中不支持該屬性）復(fù)選框也可以附帶如下屬性：l 所有通用屬性l disabled、readonly、tabindex和accesskey，本章后面將介紹它們l UI事件屬性5.3.4 單選按鈕單選按鈕與復(fù)選框的相似之處是其狀態(tài)也是開或關(guān)，但是主要區(qū)別在于以下兩點：當(dāng)存在一組共享相同名稱的單選按鈕時，僅可以從其中選擇一個單選按鈕。當(dāng)選擇某個單選按鈕之后，如果用戶單擊另一個選項，則新的選項將被選中，原有的選項將被

37、取消選中。不能將單選按鈕用作單個表單控件來指明開或關(guān)狀態(tài)，因為此時一旦選中該單選按鈕，將無法取消選擇它（除非編寫腳本）。因此，如果希望為用戶提供多個選項，并且一次只能選擇其中一個選項，則單選按鈕是理想的選擇。在這種情況下，一種替代方法是使用下拉選項框，下拉選項框允許用戶從多個選項中僅選擇一項。是使用一個下拉選項框還是使用一組單選按鈕，依賴于下面3個方面：l 用戶的期望：如果表單模仿紙張表單，該紙張表單提供多個復(fù)選框，并且用戶只能從中選擇一個復(fù)選框，則應(yīng)當(dāng)使用一組單選按鈕。l 查看所有選項的需要：如果用戶預(yù)先看到所有的選項能夠有助于他們進(jìn)行選擇，應(yīng)當(dāng)使用一組單選按鈕。l 空間的需要：如果空間較小

38、，則下拉選項框?qū)⒈纫唤M單選按鈕節(jié)省空間。注意：術(shù)語“單選按鈕”來自于老式收音機。在某些老式收音機中，用戶一次僅能按下一個按鈕來選擇一個事先設(shè)置好的廣播臺，而不能同時按下收音機中的兩個按鈕，按下其中一個按鈕將彈起另一個按鈕。仍然需要使用元素來創(chuàng)建單選按鈕，此時該元素的type屬性值將被設(shè)置為radio。例如，下面的單選按鈕用于允許用戶選擇他們想要采用的旅行方式(ch05_eg08.html)： Please select which class of travel you wish to fly: First class Business class Economy class 其中只允許用戶選

39、擇3個選項中的一個，因此單選按鈕是理想的控件。本書將單選按鈕名稱的起始字符設(shè)置為rad。圖5-10中給出了這段代碼在瀏覽器中的外觀。圖5-10表5-6給出了type屬性值為radio時元素所能附帶的屬性。表5-6單選按鈕也可以附帶如下屬性：l 所有的通用屬性l 所有UI事件屬性l disabled、tabindex和accesskey，本章后面將介紹它們注意：如果具有一組共享相同名稱的單選按鈕，當(dāng)頁面加載時某些瀏覽器將自動選擇第一個選項盡管在HTML規(guī)范中沒有要求這一點。因此，如果單選按鈕表示一組值例如用于投票應(yīng)用程序一則最好選擇一個中間選項作為默認(rèn)值，以防止某些用戶忘記選擇其中一項時，瀏覽器

40、選擇的結(jié)果不會存在什么偏見。為此，需要使用checked屬性。5.3.5 選項框下拉選項框允許用戶從下拉菜單中選擇一項。下拉選項框比一組單選按鈕占用的空間要少得多。對于單行文本輸入控件，可以采用下拉選項框代替，此時可以限制用戶輸入的選項。例如，可以使用選項框允許用戶指示他們居住的國家或州（優(yōu)點是所有來自美國的用戶將具有相同的值，而不是可能會填寫U.S.A.、U.S.、United States、America或North America，然后不得不處理同一個國家的多種答案）。下拉選項框包含在一個元素中，選項框中的每一個選項則包含在一個元素中。例如，下面的表單為用戶創(chuàng)建的下拉選項框用于選擇一種顏

41、色(ch05_eg09.html)： Select color Red Green Blue其中起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本用于向用戶顯示選項，如果某個選項被選中，則它的值（在value屬性中提供）將被發(fā)送給服務(wù)器。第一個元素沒有值，而它的內(nèi)容是Select color;這表明用戶必須選擇一種顏色。最后再次注意，這里使用字符sel作為選項框名稱的起始字符。圖5-11給出了這段代碼在瀏覽器中的外觀。圖5-11注意，選項框的寬度將是顯示給用戶的最長選項的寬度；在這個示例中，選項框的寬度是文本Select color的寬度。1.元素元素是下拉列表框的包含元素，它可以采用表5-7所示的屬性。表5-7屬

42、 性目 的name控件的名稱size可用于表示一個滾動列表框，后面將介紹滾動列表框。它的值是列表中同時可見的行數(shù)multiple允許用戶從菜單中選擇多個項。如果沒有該屬性，則用戶將只能選擇其中一項。在早期的HTML版本中，這個屬性不具有值。但是，在有效的XHTML中，該屬性必須被賦予值multiple (例如)。注意，使用這個屬性將改變選項框的外觀，在本章后面的“利用multiple屬性選擇多個選項”一節(jié)中將對此進(jìn)行介紹HTML和XHTML規(guī)范中指明，元素必須至少包含一個元素，但實際上它通常應(yīng)該包含多個元素。畢竟，如果下拉列表框只包含一個選項，將會使用戶感到困惑。2.元素在任何元素中至少具有一個元素。起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本將顯示為該選項的標(biāo)簽。元素可以采用表5-8所示的屬性。表5-8屬