| Posted: 2004/11月/16 1:00下午 | IP記錄
|
|
|
本章將擴充你的初級HTML標識符的知識，向你講述怎樣使用窗體、列表及表格。通過使用窗體，你可以與參觀你網頁的用戶進行交互 ，本章也向你介紹怎樣使用HTML標識符了創建信息列表，讀完本章後，你還可在你的網頁上使用HTML表格來設計更好的界面。
使用HTML窗體
要建立一個交互式的網點，你需要使用HTML窗體，它可以讓你收集參觀你網點的用戶提供的信息，並對此作出反應。使用窗體，你可 以建立類似復選框、單選按鈕及文本框的控件。
掌握窗體的使用對高效的Active Server Pages編程是必需的。ASP腳本的一個主要功能是對HTML窗體中輸入的信息進行處理，因此，你應當將窗體看作是ASP應用 程序中主要的用戶接口。
要建立HTML窗體，可以使用<FORM>標識符，它是一個容器標識符，包含其它窗體元素並在它的屬性中指明對於此 窗體中收集的信息應怎樣處理。下面是個非常簡單的窗體例子：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM>
<INPUT>
</FORM>
</BODY>
</HTML>
當這個HTML文件在網絡瀏覽器上顯示時，一個三維外觀的框會顯示在屏幕上（如圖6.1），你可以在框中輸入任何你需要的文字。 然而它是死的，你輸入文字後什麼也不會發生。這個窗體實在是太簡單了，沒有什麼實際用途。
這個例子的一個問題是窗體不知道何時你已經輸入信息完畢了。要解決這個問題，你需要加入另一個窗體元素：submit按鈕。下面 的例子是同一個窗體，只是加了一個submit按鈕：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM>
<INPUT>
<INPUT TYPE=SUBMIT VALUE=」Submit Me!」>
</FORM>
</BODY>
</HTML>
當你顯示這個修改後的HTML文件時，出現了一個具有Submit Me!文字的按鈕，用鼠標點擊這個Submit Me!按鈕，你就表明你已經在這個文本框中輸入完信息了。這就通知瀏覽器它應該對輸入的信息進行處理。
圖6.1 一個簡單的HTML窗體
然而，現在窗體還不知道怎樣處理它收集到的信息，你必須通過<FORM>的ACTION屬性來通知窗體怎樣處理這些 信息。ACTION屬性決定了窗體對輸入的信息將會採取何種方式處理。下面的例子顯示了怎樣使用這個屬性：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「MAILTO：billg@microsoft.com」>
<INPUT>
<INPUT TYPE=SUBMIT VALUE=」Submit Me!」>
</FORM>
</BODY>
</HTML>
當你在窗體中輸入完信息並提交後，ACTION屬性就會告訴窗體信息應當立即被送往Microsoft的Bill Gates。你可以使用下面的語句來將窗體信息發往任何一個Internet 地址：
<FORM ACTION＝「MAILTO：name@domain.com」>
然而，你很少要將窗體信息發往一個E_Mail地址，在大部分情況下，你需要把窗體信息發給本地網點進行處理。第15章「使用多 個Active Server Pages」介紹了怎樣建立Active Server Pages腳本來處理窗體信息。要將窗體信息發往一個Active Server Page，你可以使用下面的HTML語句：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「/somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT>
<INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
在此例中，ACTION和METHOD屬性指明了窗體信息應當被發送給名為mypage.asp的Active Server Pages去處理。ACTION屬性給出了Active Server Pages的路徑，METHOD屬性指明窗體信息通過什麼方式送出。在此粒中，在文本框中輸入的窗體信息通過post方式送給A ctive Server Pages。
幾乎在所有的情況下，<FORM>標識符都和本例中的用法一樣，你可以通過ACTION屬性來指定處理窗體的Act ive Server Page，並且通過METHOD屬性指定窗體信息用post方式發送。
在這個例子中，還要加入一條語句才能使之實用化。當你包含例如文本框之類的窗體元素時，你應當為每個窗體元素起一個名字。你可以 通過<INPUT>的NAME屬性來實現這一點。下面的例子有兩個不同的文本框，分別叫作text1和text2：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT NAME=「text1」>
<INPUT NAME=「text2」>
<INPUT TYPE=SUBMIT VALUE=」Submit Me!」>
</FORM>
</BODY>
</HTML>
在此例中，在名為text1的文本框中輸入的信息當被傳送給網站處理時，將會與名字text1相關聯，這樣在第一個文本框中輸入 的信息就與在其它窗體元素中輸入的信息區別開來。
窗體信息將會送到在ACTION屬性中指定的目的地去，這個信息包括用&符號分隔的名字和值。例如，如果你在第一個文本 框中輸入your first name，在第二個文本框中輸入your last name，則送去處理的信息將會是：
text1=yourfirstname&text2=yourlastname
事實上，在發送之前，窗體信息要先編碼。當文本編碼後，文本被一些特定的字符替換了。例如，空格符被加號（+）代替。因此如果你 在第一個文本框中輸入This is textbox1，而在第二個文本框中輸入This is textbox2，則下列的文本將會被送去處理：
text1=This+is+textbox1&text2=This+is+textbox2
當你從第15章中學會怎樣開發ASP腳本後，你將會學習怎樣處理編碼後的窗體信息。
在窗體中使用其它HTML標識符
正如你在文件主體中使用HTML標識符一樣，你也可以在<FORM>標識符中使用幾乎所有的HTML標識符。這個特 性對於為你的窗體元素建立標籤是很有用的。例如，如果你有一些文本框，你可能要為它們建立一些標籤，如下所示：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR><B>First Name：</B> <INPUT NAME=「firstname」>
<BR><B>Last Name：</B> <INPUT NAME=「lastname」>
<INPUT TYPE=SUBMIT VALUE=」Submit Me!」>
</FORM>
</BODY>
</HTML>
在此例中，名為firstname的文本框的左邊有標籤文字（黑體）：First Name，而名為lastname的文本框也是這樣（見圖6.2）。如果你需要，你也可以將特性放置於文本框的旁邊。通過使用圖 像，你可以為你的窗體元素加上一些有趣的標籤。
然而，用HTML標識符你無法改變顯示在窗體元素上的文字。例如，你用HTML無法讓Submit按鈕上的文字Submit Me!以黑體顯示。而且，你無法控制在文本框中輸入的文本的外觀，這是現在HTML的一個弱點。你的窗體總是顯示灰色按鈕及黑色 文字（除非你使用圖像，這將在下一節介紹）。
注意
雖然你不能用標準HTML來控制窗體元素中文字的外觀，但你可以在Netscape Navigator 4.0和Internet Explorer 4.0中使用cascading style sheet來做到這一點。可參閱下一章來學習怎樣使用cascading style sheet。
圖6.2 使用標籤的HTML窗體
你可以在HTML文件主體的任何部位放置<FORM>標識符，而且──你會發現這很有用──你可以在同一個HTML 文件中包含多個窗體。這對於激活不同的Active Server Page腳本來處理不同的窗體信息是很有用的。要確保你的窗體不互相覆蓋，並且不能互相包含。例如，下面的HTML代碼是非法的 ：
<HTML>
<HEAD>
<TITLE> Bad Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT NAME=「textbox1」>
<INPUT NAME=「textbox2」>
<BR><INPUT TYPE=SUBMIT VALUE=」Submit Me!」>
<FORM ACTION＝「someotherdirectory/myotherpage.asp」 METHOD=「POST」>
<INPUT NAME=「anothertextbox1」>
<INPUT NAME=「anothertextbox2」>
<BR><INPUT TYPE=SUBMIT VALUE=」Submit Me Also!」>
</FORM>
</FORM>
</BODY>
</HTML>
這個HTML代碼不能正常工作，因為一個<FORM>標識符嵌在另一個中。如果你發現一個窗體不如你所期望的那樣正 常工作，你就得好好檢查一下，看是否你偶然地將<FORM>標識符交錯了，或是忘記結束你的一個窗體。
文本框
最基本的窗體元素是文本框（見圖6.3）。你可以用不帶屬性的<INPUT>標識符來建立一個空的文本框。然而，要 想建立一個有用的文本框，你需要包含NAME屬性。下面的例子包含了兩個名為text1和text2的文本框：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT NAME=「text1」 TYPE=「text」>
<INPUT NAME=「text2」>
<INPUT TYPE=SUBMIT VALUE=」Submit Me!」>
</FORM>
</BODY>
</HTML>
圖6.3 文本框
注意第一個文本框的TYPE屬性設為「text」，你可以根據你的需要在文本框中包含這個屬性。但這沒有什麼特別的效果，因為& lt;INPUT>標識符缺省地將TYPE設為「text」。
你也可以使用<INPUT>的VALUE屬性來指定在用戶輸入前缺省狀態下文本框中顯示的文字。例如，假設你有一個 文本框，讓用戶在其中輸入他的國別，你預計你的大部分用戶都是美國人，你可以使用下面的語句將缺省國別設為美國：
<INPUT NAME=「country」 VALUE=「USA」>
<INPUT>的另一個有用的屬性是SIZE，使用它你可以控制一個文本框的寬度。你應該根據需要以字符數來指定S IZE屬性的值。
注意
由於文本框中顯示字體的大小不是固定的，文本框的長度可能不夠用來顯示一定數量的字符。這是因為不同的字符有不同的寬度，因此你 應當將你的文本框的大小設得比你要輸入的最大字符數要大些。
文本框的最後一個很有用的屬性是MAXLENGTH。通常你可以一直在文本框中輸入文字，因為文本框會自動地水平滾動來讓你輸入 更多的東西，但是這有下面的兩個弊端：
首先在原理上，某些用戶會蓄意在你網點的文本框中輸入非常多的文本，讓你的網點嚴重超負荷而無法處理它們。你應當設定用戶行為的 限度，因此為安全著想，你應當使用MAXLENGTH屬性來控制你的用戶最多可在文本框中輸入多少信息。
有時你蓄意強制用戶輸入一定長度的信息。例如，你想讓用戶輸入6個數字的郵政編碼，而不是其它位數的，這就要靠MAXLENGT H來實現。
窗體按鈕
在HTML窗體中典型使用的按鈕有三種，我們已經介紹了第一種按鈕──Submit按鈕。當你點擊Submit按鈕時，窗體由& lt;FORM>的ACTION屬性所指定的程序進行處理，Submit按鈕的用法如下所示：
<INPUT TYPE=SUBMIT VALUE=「Do it!」>
VALUE屬性的值決定了在按鈕上顯示的文字。
圖形按鈕與Submit按鈕的效果幾乎是一樣的，然而這種類型的按鈕顯示出來是一幅圖像，而不是一個難看的灰色矩形框（見圖6. 4）。下面的例子說明了怎樣使用圖形按鈕：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT NAME=「textbox1」>
<INPUT NAME=「textbox2」>
<BR><INPUT TYPE=IMAGE SRC=「myimage.gif」 BORDER=0>
</FORM>
</BODY>
</HTML>
圖6.4 圖像按鈕
和把圖像當作超鏈接時的情況一樣，你應當把BORDER屬性的值設為零來隱藏在諸如Netscape Navigator這樣的瀏覽器上顯示時會出現在圖像周圍的黑框。在某些情況下，這個附加的圖像框會令人分心。你也可以在圖像按 鈕中使用<IMG>標識符的其它屬性（見第5章「初級HTML」）。
注意
圖像按鈕的一個有趣現象是當點擊它時，不但提交窗體信息，而且提交圖像被點擊點的坐標。例如，如果你在一個長寬各為5個象素的圖 像中央點擊它，則在窗體信息之後就會傳送點擊點的坐標（3，3）。
圖像按鈕的這個特性對於將窗體功能組合成image map是很有用的（image map將在下一章討論）。通常的image map不允許你交流窗體的內容。
最後一種按鈕類型是reset按鈕。當用戶點擊reset按鈕後，所有的窗體內容都恢復到它們初始的值。例如，沒有缺省值的文本 框將被清空，而用VALUE屬性指定了值的將回到初始的特定值。與Submit按鈕的情況一樣，你通過VALUE屬性指定顯示在 reset按鈕上的文字。如下面的例子所示：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT NAME=「textbox1」>
<INPUT NAME=「textbox2」 VALUE=「mydefault」>
<BR><INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
<BR><INPUT TYPE=RESET VALUE=「Clear Me!」>
</FORM>
</BODY>
</HTML>
在此例中，窗體用戶點擊標有Clear Me!的按鈕後，所有窗體值都被清除並回到初始狀態的值。在一個特定窗體中使用這三種按鈕沒有什麼限制，這將很方便，特別是對於 Submit按鈕。有時在一個網頁中有必要包含好幾個Submit按鈕，以使用戶在決定怎樣使用信息時就能發送窗體信息。
例如，假設你的網點有一頁用於註冊，而且需要讓你的用戶能夠決定他們的註冊信息是保持隱秘，還是公開出來。一個方法是，你可以再 加入一個附加窗體讓用戶能選擇，而最簡單的方法是你建立兩個Submit按鈕，一個上面寫著Register Private，而另一個上面寫著Register Public。這後一種方法能讓用戶簡單地通過點擊兩個按鈕中的一個進行選擇。
要使用多個按鈕，你需要為按鈕提供NAME屬性，看下面這個簡單的例子：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR><INPUT NAME=「Yes」 TYPE=SUBMIT VALUE=「yes!」>
<BR><INPUT NAME=「No」 TYPE=SUBMIT VALUE=「no!」>
</FORM>
</BODY>
</HTML>
在這裡，點擊yes!或是no!按鈕都會激發同一個窗體行為，然而當窗體被處理時，用戶的選擇被獲取了（用戶的選擇怎樣被獲取可 參閱第10章「初級SQL」及第11章「中級SQL」）。
再次重申，本節你學會了HTML窗體中最常使用的三種類型的按鈕：
Submit按鈕，用於將窗體信息提交給服務器進行處理，或將信息通過E_Mail傳送給一個地址。
圖像按鈕，與Submit按鈕的作用相同，但用圖像代替了文字。
Reset按鈕，將所有窗體的值設置到初始狀態的值。
密碼框
假設你想讓用戶在參觀你的網點之前先進行註冊，使用通常的文本框，你可以建立一個HTML窗體來獲得用戶的名字和密碼，但是你不 想讓用戶在輸入他們 的密碼時，有人在他們的背後偷看。要保護用戶的密碼，你就要使用密碼輸入框（見圖6.5）。密碼框的工作原理與文本框類似，只是 當信息輸入時是隱藏的。下面是個例子：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
Please enter your name and password:
<BR> Name: <INPUT NAME=「username」>
<BR> Password: <INPUT NAME=「password」 TYPE=PASSWORD>
<INPUT TYPE=SUBMIT VALUE=「Continue」>
</FORM>
</BODY>
</HTML>
圖6.5 密碼框
注意
值得重視的是在密碼框中輸入的文本在提交時是不被加密的，因此在理論上這意味著某些人可以在線路上竊取你在密碼框中輸入的文字。 當這些文字通過Internet傳送給你的網站時，對大部分應用程序，這不會產生什麼問題。你可以對HTML窗體中提交的信息進 行加密來防止別人竊取這些信息。見第二章的「使用加密層」一節的「安裝和使用Internet信息服務器」。
當上例的HTML文件在網絡瀏覽器上顯示時，你可以在密碼框中輸入文字，就如同在一般的文本框中輸入一樣。然而，所有輸入的文字 都被隱藏了（通常是*號）。你可以在密碼框中使用SIZE和MAXLENGTH屬性來控制密碼框的長度及可在框中輸入的最大字符 數。
復選框
復選框在兩種情況下是有用的。在最簡單的情況下，你可以用復選框來讓用戶進行真或假的選擇，如下面的例子所示：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Do you like this web site?
<BR> <INPUT NAME=「Like」 TYPE=CHECKBOX VALUE=「yes」>
<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
當這個HTML語句在網絡瀏覽器上顯示時，一個空的框出現在問題Do you like this web site?的下面。如果當Submit按鈕被按下之前這個框被選擇了，則VALUE屬性的值也被提交。在這種情況下，NAME和 VALUE的值like和yes被提交了。
如果在按下Submit按鈕時復選框未被選擇，則什麼也沒有提交，甚至復選框的名字也未提交。你不能將復選框的值指定為「off 」。
你也可用一個名字來建立多個復選框來收集信息（見圖6.6）。例如，你想知道參觀你網點的人是如何發現它的，而且你想提供用戶發 現你網點的各種可能途徑，你可以使用下列的HTML代碼：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> How did you find out about this web site?
<BR> Magazine: <INPUT NAME=「discover」 TYPE=CHECKBOX VALUE=「Magazine」>
<BR> Search Engine: <INPUT NAME=「discover」 TYPE=CHECKBOX VALUE=「Search」>
<BR> Friend: <INPUT NAME=「discover」 TYPE=CHECKBOX VALUE=「Friend」>
<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
圖6.6 多個復選框
注意這個例子中的三個復選框有同一個名字。當用戶按下了Submit按鈕，每個被選擇的復選框的值都會被提交。在這種情況下，每 個值都與discover的名字相關。
注意
不要將多個復選框與單選按鈕（下面將要討論）混淆。與單選按鈕不同，即使復選框有同一個名字，也可同時選擇多個復選框。
你可以在一個窗體中根據需要設置多個復選框，如果你需要一組復選框的值與同一個名字相關，那麼你就為這一組的每個復選框提供同一 個名字。
缺省狀態下，復選框初始是未被選擇的，你可以通過CHECKED屬性來改變這個缺省值。CHECHED屬性是那些不帶參數的少見 的幾個屬性之一。要建立缺省狀態為CHECKED的復選框，可使用下面的標識符：
<INPUT NAME=「mycheckbox」 TYPE=CHECKBOX VALUE=「yes」 CHECKED>
單選按鈕
你可以已經在網頁上或是一般的程序上見過單選按鈕（見圖6.7），使用單選按鈕，你可以在多個值之間進行選擇，然而與復選框不同 ，用戶一次只能選擇一個單選按鈕。
例如，假設你需要知道瀏覽你網頁的人的性別，你就可以使用單選按鈕來讓用戶選擇他們的性別。下面的例子說明了怎樣去做：
<HTML>
<HEAD>
<TITLE> Radio Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Please indicate your sex:
<BR> Male: <INPUT NAME=「sex」 TYPE=RADIO VALUE=「male」>
<BR> Female: <INPUT NAME=「sex」 TYPE=RADIO VALUE=「female」>
<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
圖6.7 單選按鈕
注意所有的單選按鈕的名字是一樣的，當此頁的用戶點擊Submit按鈕時，只有一個單選按鈕的值會被發送。發送的值是在單選按鈕 的VALUE屬性中指定的值。
與復選框相似，你也可以使用CHECKED屬性來指定當網頁被第一次調用時應該選擇的單選按鈕。你也可以在一個網頁中根據需要設 定多個單選按鈕，如果你需要多組單選按鈕，只要為每組按鈕起個不同的名字就可以了。
建立下拉式列表框
用來代替復選框和單選按鈕的另一個方法是建立下拉式列表框來顯示一個選擇菜單（見圖6.8）。下拉式列表框一次只能顯示一個選擇 ，要查看別的可能的選項，你可以點擊框右邊的箭頭。使用下拉式列表框的一個好處是它和單選按鈕和復選框相比，佔用網頁上較少的空 間。
你可以使用<SELECT>和<OPTION>標識符來建立一個下拉式列表框，像下面的例子：
<HTML>
<HEAD>
<TITLE> Drop-Down List Box </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Please indicate your sex:
<BR> <SELECT NAME=「sex」>
<OPTION VALUE=「Is Male」>Male
<OPTION VALUE=「Is Female」>Female
</SELECT>
<INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
圖6.8 下拉式列表框
在此例中，<SELECT>的NAME屬性為你的下拉式列表框提供了一個名字，每一個<OPTION> 標識符提供了一個可能的選項。<OPTION>的VALUE屬性指定了當選擇了此項並按下Submit按鈕後應該被 提交的值。最後，在<OPTION>標識符後出現的文字決定了這一項在下拉式列表框中怎樣顯示出來。
此例中的列表框與一組單選按鈕的功能一樣，你一次只能選擇一項。例如，如果你從列表框中選擇了Female一項，當按下Subm it按鈕時，發送的值將是Is Female。這個值將與列表框名sex相關聯，你永遠也不會一次選擇多項。
缺省狀態下，跟在第一個<OPTION>標識符後的文字將會成為下拉式列表框的初始值而顯示，你可以使用<O PTION>的SELECT屬性來改變這一缺省值。在下例中，當列表框出現時，Female被選擇了，雖然在選項列表中M ale排在Female的前面。
<HTML>
<HEAD>
<TITLE> Drop-Down List Box </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Please indicate your sex:
<BR> <SELECT NAME=「sex」>
<OPTION VALUE=「Is Male」>Male
<OPTION VALUE=「Is Female」 SELECTED>Female
</SELECT>
<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
指定一個不同的缺省值在某種情況下是很有用的，那就是當你有一個字母順序的列表，但你想選擇列表中的某一個作為它的缺省值。例如 ，假設你有一個許多圖像的列表，但你想讓缺省的圖像是中國，在這種情況下，你可以使用SELECT屬性來指定P.R.China 為缺省值，即使這個國家的名字排列在整個字母表的後頭。
建立滾動列表框
另一個可代替一組單選按鈕及復選框的是滾動列表框（見圖6.9）。使用滾動列表框，你可以建立一個選項列表，用戶可以從中選擇一 個或多個選項。你可以使用建立下拉式列表框的標識符來建立一個滾動列表框，只是使用不同的屬性。下面是個例子：
<HTML>
<HEAD>
<TITLE> Scrolling List Box </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Please indicate your sex:
<BR> <SELECT NAME=「sex」 SIZE=2>
<OPTION VALUE=「Is Male」>Male
<OPTION VALUE=「Is Female」>Female
</SELECT>
<INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
圖6.9 滾動列表框
<SELECT>的SIZE屬性將一個下拉式列表框轉變成一個滾動列表框，SIZE屬性指定了一次在屏幕上可顯示多 少選項。
當用滾動列表框代替下拉式列表框時，你失去了節省網頁空間的好處。然而，滾動列表框有一個很大的好處。使用滾動列表框，你可以一 次選擇多個選項，可以使用<SELECT>標識符的MULTIPLE屬性來實現這一點：
<HTML>
<HEAD>
<TITLE> Simple Form </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> How did you find out about this web site?
<BR> <SELECT NAME=「discover」 SIZE=3 MULTIPLE>
<OPTION VALUE=「Magazine」>Magazine
<OPTION VALUE=「Search」>Search Engine
<OPTION VALUE=「Friend」>Friend
</SELECT>
<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
當這個HTML文件在瀏覽器上顯示時，一個滾動列表框出現在屏幕上，如果你用鼠標在列表框中進行選擇的同時按住Ctrl鍵，你就 可以一次選擇多個選項。例如，你可同時選擇Magazine和Friend（你也可使用Shift鍵來一次選擇相鄰的多個選擇） 。
注意
通常，我不願使用MULTIPLE實現，原因是許多瀏覽網頁的人不知道如何進行多項選擇，而且進行多項選擇的方法因各人使用的計 算機類型而異。例如，在蘋果機上，你要使用Command鍵而不是Ctrl鍵。當你想讓用戶進行多項選擇時，考慮使用一組復選框 吧。
建立文本區
以前我們討論的窗體元素中，用戶不能輸入超過一行的文本，<TEXTAREA>標識符可以建立一個文本區，在這裡你 可提供給用戶更大的空間來自由地輸入文本（見圖6.10）。當你想讓用戶輸入一段文字的時候就使用這個標識符。看下面的例子：
<HTML>
<HEAD>
<TITLE> Text Area </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Please enter your comments below:
<BR> <TEXTAREA NAME=「comments」 COLS=40 ROWS=10></TEXTAREA>
</FORM>
</BODY>
</HTML>
圖6.10 文本區
你應當立即注意到，在此例中，沒有使用<INPUT>標識符來建立文本區，你使用<TEXTAREA> 標識符來建立文本區，這個標識符與其它窗體元素一樣，必須在<FORM>標識符中出現。
注意
一些瀏覽器允許你使用下面的語句：
<INPUT TYPE=TextArea COLS=40 ROWS=10>
不要這樣做，在<INPUT>標識符的屬性中建立文本區是沒什麼好處的。如果你想讓你的網頁與瀏覽器有最大程度的兼 容性，就使用<TEXTAREA>標識符，不要用TextArea屬性。
使用COLS和ROWS屬性你可以指定文本區的寬度和高度，COLS屬性以列來指定文本區的寬度，ROWS屬性以行來指定文本區 的高度。注意這兩個屬性都是以字符平均寬度來度量的，因為文本區不使用固定字體，因此你在一個50列的文本區內不能剛好輸入50 個字符。
你不能給COLS和ROWS屬性指定百分數值，這是很不方便的，因為這使得網頁在具有不同分辨率的顯示器上看起來不一樣，這也是 HTML的一個不足。
而且，文本區沒有MAXLENGTH屬性。沒有辦法阻止某些用戶在文本區內輸入大量的文字，對此你一點辦法也沒有。
注意，<TEXTAREA>標識符是一個容器標識符，如果你想在第一次讀入網頁時，在文本區顯示出文字，那就要將文 字包含在<TEXTAREA>標識符內。如下所示：
<HTML>
<HEAD>
<TITLE> Text Area </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<BR> Please enter your comments below:
<BR> <TEXTAREA NAME=「comments」 COLS=40 ROWS=10>
I am the default text!
</TEXTAREA>
</FORM>
</BODY>
</HTML>
當這個HTML文件被網絡瀏覽器解釋時，文字I am the default text!將在文本區內顯示。注意你只能在文本區內輸入文字（包括第五章中討論的特殊字符──見「加入特殊字符」一節）。任何在 <TEXTAREA>中出現的HTML標識符都將被忽略。
HTML規範中沒有定義文本區內的文字怎樣換行，當你在Internet Explorer中在文本區中輸入一行文字到達右邊界時，文本就會自動換到下一行；而使用Netscape Navigator時，文字會向右滾動。
如果你想在Netscape Navigator中控制文本區內的文字怎樣換到新的一行，就要使用Netscape特有的屬性WRAP。這個屬性可接受三個值 ：OFF、PHYSICAL和VIRTUAL，缺省值是OFF，即文本不會換到新的一行。另一方面，當WRAP＝PHYSICA L時，文本會自動換到下一行。當文本區的內容被提交時，回車鍵會被添加到文本換行的地方。如果你想讓文本區的文字自動換行，但又 不想在提交內容時加入附加的回車鍵，就可以使用WRAP＝VIRTUAL。
當我建立文本區時，我幾乎總是使用WRAP＝VIRTUAL屬性。當文本區內的文字不自動換行，將會造成用戶輸入信息的混亂，通 過使用這個屬性，我可以確保不管在Microsoft還是Netscape的瀏覽器上文本區的文字都會自動換行，而且我也不想在 解釋文本區的內容時處理多餘的回車鍵，因此使用WRAP＝VIRTUAL可做到這一點。
建立隱藏區
使用隱藏區，你可以在永遠不在屏幕上顯示的窗體中加入一些信息。當然，這些信息在窗體提交時也會被包含。
隱藏區對Active Server Pages程序員來說特別有用，你可能會經常使用它們來在網頁之間傳遞隱藏信息。當然只有當你學習了怎樣使用Active Server Pages之後，你才能體會到使用隱藏區的好處。
你可以使用隱藏區來建立不依賴於Cookies的變量，這樣做既有優點也有缺點，要瞭解更多信息，可參閱第16章的「不使用Co okies來保留狀態」一節中的「使用Active Server Pages Session」。
下面的例子在窗體中建立了一個隱藏區：
<HTML>
<HEAD>
<TITLE> Hidden Field </TITLE>
</HEAD>
<BODY >
<FORM ACTION＝「somedirectory/mypage.asp」 METHOD=「POST」>
<INPUT NAME=「secret」 TYPE=HIDDEN VALUE=「You cannot see me!」>
<INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
當這個HTML文件在網絡瀏覽器上顯示時，你只能在屏幕上看見一個Submit按鈕，名為secret的隱藏區並未顯示出來。然 而當窗體按鈕被按下時，值You cannot see me!被作為窗體內容的一部分發送了。
警告
你不要在隱藏區內放置你私人的信息，網頁瀏覽者可使用瀏覽器的View Source命令看到隱藏區的東西。隱藏區這是隱藏起來不可見，但它們並不能躲過聰明用戶的眼睛。
建立文件上載按鈕
假設你想建立一個讓人們做賣房廣告的網點，如果人們能上載他們房子的照片，那將是非常有用的；或者你想建立一個收納短故事的網點 ，那也要讓人們能上載他們的故事──例如Microsoft Word格式的文件。
理論上，你可以使用<INPUT>標識符的TYPE＝FILE屬性來實現這一點，使用這個屬性，你可以在窗體上建立 一個文件上載按鈕（見圖6.11）。當你網點的用戶點擊這個按鈕時，他們可以選擇一個本地硬盤上的文件進行上載。下面的例子顯示 了怎樣去做：
<HTML>
<HEAD>
<TITLE> File Upload </TITLE>
</HEAD>
<BODY >
<FORM ENCTYPE＝「multipart/form-data」
ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>
Please choose a picture to upload:
<BR> <INPUT NAME=「picture」 TYPE=FILE ACCEPT=「image/*」>
<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>
</FORM>
</BODY>
</HTML>
當這個HTML文件在Netscape Navigator（版本3.0或更高）上顯示時，一個普通的文本框顯示在一個Browse按鈕旁，用戶可以直接在文本框中輸入 文件的名字，或使用Browse按鈕來在文件對話框中選擇一個文件。當這個窗體被提交後，用戶選擇的文件也被提交了。
注意這個例子中<FORM>標識符的ENCTYPE屬性，它指定了提交時窗體信息的編碼方式。通常窗體信息是URL 編碼的（空格被＋號代替），然而這種編碼方法對於非文本的信息是很差的，要想高效地傳送一個圖像文件，你應當使用ENCTYPE ＝「multipart/form-data」。
圖6.11 文件上載按鈕
實際的文件上載按鈕用下述標識符創建：
<INPUT NAME=「picture」 TYPE=FILE ACCEPT=「image/*」>
由於TYPE屬性的值是FILE，瀏覽器就會建立一個文件上載按鈕。ACCEPT屬性限制了在文件對話框中出現的文件的類型。在 此例中，文件類型被限制為圖像文件，你可以指定MIME類型中的任意一個或幾個作為ACCEPT屬性的值。
注意
MIME用於多用途Internet mail擴展。MIME最初被用來作為指定e_mail附屬文件類型的的方法，瀏覽器使用MIME類型來與特定文件相關聯。
一些MIME類型的例子是用於GIF圖像的image/gif，用於JPEG圖像的image/jpeg，用於Microsof t Excel表格的application/x-msexcel，用於Microsoft Word文檔的application/msword。
要查看你的計算機支持的MIME類型，可以使用Windows Explorer中的View/Options/File Types命令。
文件上載按鈕是非常有用的，然而令人遺憾的是，現在的瀏覽器軟件只支持一部分文件上載按鈕，或乾脆就不支持。雖然文件上載按鈕是 HTML 3.2規範的一部分，但這種情況也是存在的。
例如，Netscape Navigator（版本3.0和4.0）忽略ACCEPT屬性，Internet Explorer 3.0更糟糕，它完全拒絕解釋文件上載按鈕，並用一般的文本框代替，而Internet Explorer 4.0能識別文件上載按鈕。在文件上載按鈕被更多的瀏覽器軟件支持前，要小心地使用它們。
|
標題 
名單 
搜索 
Help
注冊 
登入
DoReMe : ASP教學區
話題: 第六章 中級HTML
