建立互動(dòng)式表單

1、著作權(quán)所有 旗標(biāo)出版股份有限公司第第 9 章章建立互動(dòng)式建立互動(dòng)式表單表單2本章提要本章提要p9-1 建立表單p9-2 表單的各種輸入欄位p9-3 列表欄的變化p9-4 區(qū)塊式文字輸入欄位p9-5 組織表單內(nèi)容3前言前言p在瀏覽網(wǎng)頁(yè)時(shí), 常可看到讓來(lái)訪者留下意見(jiàn)、資料的設(shè)計(jì), 提供雙向互動(dòng)的機(jī)會(huì), 這些可輸入資料的欄位, 統(tǒng)稱為表單 (Form)。p要設(shè)計(jì)可輸入資料的網(wǎng)頁(yè)並不困難, 麻煩的是如何處理使用者所輸入的資料。以目前而言, 大多數(shù)的表單資料都是透過(guò) ASP (Active Server Page)、PHP (PHP: Hypertext Preprocessor)、CGI (Commo

2、n Gateway Interface) 程式來(lái)處理。4前言前言p不過(guò)也有比較單純的處理方式, 就是將資料以電子郵件的方式寄到自己的電子信箱中, 事後再用人工或程式來(lái)處理這些郵件 (資料)。p為避免混入太多的程式設(shè)計(jì)內(nèi)容, 在這一章不會(huì)詳細(xì)介紹 ASP、PHP、或 CGI 程式的寫法, 仍以說(shuō)明建立表單的 HTML 標(biāo)籤為主。59-1 建立表單建立表單p所有的表單內(nèi)容都是放在 . 標(biāo)籤之中, 包括表單中的說(shuō)明文字、供使用者輸入的欄位等等。p在文件中可設(shè)定多個(gè)表單, 但是不能做巢狀的表單, 也就是不能在 標(biāo)籤中加入第二個(gè) 標(biāo)籤。以下先介紹如何設(shè)計(jì)表單中的欄位。69-1-1 表單中的輸入欄位表單中

3、的輸入欄位p在一般表單中所看到的輸入欄位, 幾乎都是用 標(biāo)籤來(lái)設(shè)定的, 只要修改其中的屬性, 就會(huì)出現(xiàn)不同的輸入欄位。 標(biāo)籤的格式大致如下所示：p其中 type 屬性就是用來(lái)設(shè)定要使用的輸入欄位種類, 例如一般的文字輸入欄 (text)、單選鈕 (radio)、多選鈕 (checkbox)、或是按下後就會(huì)送出表單資料的按鈕 (button) 等等。79-1-1 表單中的輸入欄位表單中的輸入欄位pvalue 屬性所設(shè)的初始值, 則是一開(kāi)始就出現(xiàn)在該輸入欄位中的資料。p當(dāng)表單資料送出時(shí), 使用者在各欄位輸入的資料是以 欄位名稱 = 資料值 的方式送出, 所以為了方便程式能由其中萃取出合適的資訊 (

4、或是供自己閱讀), 最好用 name 屬性為各欄位取一個(gè)比較有意義的名稱。接著會(huì)為您介紹各種資料輸入欄位的用法。89-1-2 建立可輸入文字的欄位建立可輸入文字的欄位p這是最常見(jiàn)的輸入欄位之一, 其設(shè)定為 type=text, 這樣就會(huì)出現(xiàn)一個(gè)可供輸入的方框, 例如：99-1-2 建立可輸入文字的欄位建立可輸入文字的欄位p如果想要調(diào)整方框的長(zhǎng)度, 則可再加上 size 屬性。若要限制使用者輸入的資料長(zhǎng)度, 則可用 maxlength 加以設(shè)限, 例如：psize 屬性將方框設(shè)定成 20 個(gè)字元寬, 但 maxlength 則限制了使用者只能輸入 10 個(gè)字元, 輸入滿 10 個(gè)字後, 就不能再

5、輸入其它的字了。109-1-3 建立可輸入密碼的欄位建立可輸入密碼的欄位p將 type 設(shè)為 passward, 則可得到一個(gè)與 text 相似的輸入欄位, 不過(guò)在這個(gè)密碼欄中輸入的文字在螢?zāi)簧隙紩?huì)以 * 或 符號(hào)取代, 例如：p這是為了達(dá)到保密的效果, 所以才以 取代使用者輸入的文字顯示在螢?zāi)簧稀?19-1-4 建立送出資料的按鈕建立送出資料的按鈕p理論上, 所有的表單中都會(huì)有一個(gè)送出資料的按鈕, 當(dāng)使用者按下此鈕時(shí), 瀏覽器就會(huì)將使用者在表單中所輸入的資料送出。p使用 type=submit 即可做出用來(lái)送出資料的按鈕, 由於不須從這個(gè)按鈕本身得到資料, 所以不用設(shè)定其 name 屬性 (

6、當(dāng)然您想要用的話仍可加上此屬性)。129-1-4 建立送出資料的按鈕建立送出資料的按鈕p至於此時(shí)在 value 屬性所設(shè)的文字, 會(huì)變成出現(xiàn)在按鈕上的文字, 例如：p按鈕的大小會(huì)依 value 中的文字多寡自動(dòng)調(diào)整, 像上面的例子用了 4 個(gè)字, 所以按鈕就變得稍微大了些。139-1-5 建立清除輸入資料的按鈕建立清除輸入資料的按鈕p有一個(gè)送出資料的按鈕, 相對(duì)的還有一個(gè)清除表單中已輸入資料的重設(shè)鈕 (Reset), 其目的是讓使用者在發(fā)現(xiàn)有輸入錯(cuò)誤時(shí), 只要按下此鈕,就能將目前表單中所有的資料都清除掉, 以便重新輸入。149-1-5 建立清除輸入資料的按鈕建立清除輸入資料的按鈕p重設(shè)鈕的 t

7、ype 屬性就是要設(shè)為 reset, 同樣的我們可在 value 中設(shè)定出現(xiàn)在按鈕中的文字：159-1-6 應(yīng)用實(shí)例應(yīng)用實(shí)例p現(xiàn)在就將上述的標(biāo)籤都組合在一起, 形成一個(gè)簡(jiǎn)單的表單, 讓大家實(shí)際了解表單資料的運(yùn)作方式。為此, 我們只用了陽(yáng)春的 標(biāo)籤, 不加上任何的屬性 (當(dāng)然在實(shí)際的應(yīng)用上, 需加上後文所介紹的屬性)：169-1-6 應(yīng)用實(shí)例應(yīng)用實(shí)例p您可試著在僅有的兩個(gè)欄位中輸入資料, 按下清除重填清除重填鈕, 試試 Reset 的功效。最後按下送出資料送出資料鈕送出資料,此時(shí)會(huì)發(fā)現(xiàn)在瀏覽器顯示目前 URL 的地方出現(xiàn)了如下的內(nèi)容, 也就是在原有的 URL 後面, 被加上了一個(gè)問(wèn)號(hào)及瀏覽程式所

8、送出的資料：179-1-6 應(yīng)用實(shí)例應(yīng)用實(shí)例189-1-6 應(yīng)用實(shí)例應(yīng)用實(shí)例p相信由上面這個(gè)例子, 應(yīng)能看出表單資料在傳送時(shí), 其資料的排列方式, 就是依各欄位在表單中出現(xiàn)的先後次序, 依序以 & 分格排列。至於每一欄資料則套上了我們?cè)?標(biāo)籤中用 name 屬性所設(shè)的內(nèi)容而成為：欄位的名稱=使用者輸入的值的格式。199-1-6 應(yīng)用實(shí)例應(yīng)用實(shí)例p以上面的例子來(lái)看可分析如下：p如果設(shè)計(jì)的表單是將資料寄到電子信箱中, 則郵件的附件內(nèi)容也會(huì)和上面一樣。209-2 表單的各種輸入欄位表單的各種輸入欄位p除了文字輸入欄與按鈕之外, 單選鈕、多選鈕、列表欄、與多列文字欄也都在表單中經(jīng)常出現(xiàn), 另外

9、還可以做出類似影像地圖的效果喔。219-2-1 只能選擇一項(xiàng)的單選鈕只能選擇一項(xiàng)的單選鈕p要做出一組供使用者只能選擇其一的選擇項(xiàng)目時(shí),可以使用 type = radio,此時(shí)就會(huì)出現(xiàn)一個(gè)圓圈, 只要用滑鼠在這個(gè)圓圈上按一下就會(huì)出現(xiàn)一個(gè)黑點(diǎn), 表示已選擇了此項(xiàng)。p至於要讓多個(gè)單選鈕成為同一組的選項(xiàng), 只要將這幾個(gè)單選鈕的 name 屬性設(shè)定成相同的名稱即可, 例如：229-2-1 只能選擇一項(xiàng)的單選鈕只能選擇一項(xiàng)的單選鈕p此時(shí)使用者只能選擇 男 或 女 這兩個(gè)性別中的一項(xiàng)。p選好後送出表單資料時(shí), 資料中的 sex 會(huì)等於使用者所選欄位的 value 屬性值。例如選擇 女 時(shí), 在表單資料中就會(huì)

10、出現(xiàn) sex=female。239-2-1 只能選擇一項(xiàng)的單選鈕只能選擇一項(xiàng)的單選鈕p另外要提醒您的是, radio 預(yù)設(shè)的 value 值為 On。也就是說(shuō), 如果上例中我們不設(shè)定 value 屬性的話, 被勾選的項(xiàng)目將會(huì)傳回 sex=“on”。p因此, 在只有單一個(gè)單選鈕的情況下, 我們大可不必設(shè)定其 value 屬性, 例如：249-2-1 只能選擇一項(xiàng)的單選鈕只能選擇一項(xiàng)的單選鈕p只要在資料中有 male=“on” 這一組資料, 我們就知道使用者有選取此項(xiàng)了。p相反的,若有多個(gè)單選鈕, 則務(wù)必為每個(gè)單選鈕設(shè)定不同的 value, 否則不論勾選哪一個(gè)單選鈕都傳回 on, 就搞不清楚使用者

11、倒底勾選了哪一項(xiàng)。259-2-2 可重複選擇的多選鈕可重複選擇的多選鈕p若要提供可讓使用者複選的選項(xiàng), 則可使用 type=checkbox 設(shè)定, 一般也是將同一組的選項(xiàng)設(shè)為相同的名稱：269-2-2 可重複選擇的多選鈕可重複選擇的多選鈕p雖然它們的name都相同, 但若使用者選擇了一個(gè)以上的選項(xiàng)時(shí), 在傳回的資料中就會(huì)出現(xiàn)一個(gè)以上的 leisure=. 的結(jié)果。p例如上圖勾選的 2 項(xiàng), 其傳回的資料就會(huì)是 leisure=日本賞櫻之旅& leisure=加拿大賞楓之旅。279-2-2 可重複選擇的多選鈕可重複選擇的多選鈕p和單選鈕一樣, 多選鈕預(yù)設(shè) value 值也是 On, 所

12、以如果您不想設(shè)定那麼多個(gè) value 屬性, 不妨將同一組的選項(xiàng)也都設(shè)定不同的 name, 只要在傳回的資料中看看有哪幾個(gè)等於 On 的值就可以了。289-2-3 送出圖片的座標(biāo)值送出圖片的座標(biāo)值p使用影像做為輸入欄位時(shí)是以圖片做為使用者輸入的界面, 不過(guò)使用影像的輸入欄位時(shí), 使用者所輸入的資料將是滑鼠在圖形上的座標(biāo)值, 例如下面這個(gè)例子：299-2-3 送出圖片的座標(biāo)值送出圖片的座標(biāo)值309-2-3 送出圖片的座標(biāo)值送出圖片的座標(biāo)值p在這個(gè)影像輸入欄位中也可加入 align 標(biāo)籤來(lái)調(diào)整圖形影像與後面文字的對(duì)齊方式。p此外使用影像輸入欄位時(shí), 我們甚至不需使用 按鈕, 因?yàn)橹灰褂谜哂没笤?/p>

13、圖形上按一下, 資料就會(huì)立即送出, 送出的資料格式則如下所示：319-2-4 下拉式的列表欄下拉式的列表欄 與與 p假設(shè)想設(shè)計(jì)在網(wǎng)頁(yè)上選擇月份, 使用者要在 12 個(gè)選項(xiàng)中選擇其中 1 個(gè)。如果我們使用單選鈕或多選鈕來(lái)設(shè)計(jì), 則在畫面上就必須列出 12 個(gè)月份。p這時(shí)不妨考慮使用列表欄。列表欄就是在文件中常見(jiàn)的下拉式選單, 其中所列出的就是可供使用者選取的項(xiàng)目：329-2-4 下拉式的列表欄下拉式的列表欄 與與 p列表欄的製作方式要先用一對(duì) 標(biāo)籤定義出列表欄及其出現(xiàn)的位置, 接著在其中加上 標(biāo)籤, 定義每一個(gè)出現(xiàn)在列表中的項(xiàng)目：339-2-4 下拉式的列表欄下拉式的列表欄 與與 p基本上, 製

14、作列表欄就是這麼簡(jiǎn)單, 不過(guò)如果要讓它真正能夠?qū)⑹褂谜咚x取的資料傳回, 必須再加上 name 及 value 屬性。pname 屬性要加在 標(biāo)籤中, value 屬性則是要加在 標(biāo)籤中,不過(guò) value 屬性是可有可無(wú)的, 因?yàn)楫?dāng)使用者選擇了未設(shè)定 value 屬性的項(xiàng)目時(shí), 送出的值就會(huì)是該項(xiàng)目的文字內(nèi)容, 例如下面這個(gè)列表欄：349-2-4 下拉式的列表欄下拉式的列表欄 與與 p當(dāng)使用者選取的項(xiàng)目是日本賞櫻之旅日本賞櫻之旅這一項(xiàng)時(shí), 瀏覽器傳回的資料會(huì)是 album=日本賞櫻之旅日本賞櫻之旅。359-2-4 下拉式的列表欄下拉式的列表欄 與與 p但這時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題, 因?yàn)槿毡举p櫻之旅日

15、本賞櫻之旅是中文, 傳回的資料會(huì)變成亂碼, 可能造成錯(cuò)誤。如果我們將它改成：369-2-4 下拉式的列表欄下拉式的列表欄 與與 p則選取日本賞櫻之旅日本賞櫻之旅這一項(xiàng)時(shí), 瀏覽器傳回的資料會(huì)變成 album=“3”。如此就能避免中文變成亂碼的問(wèn)題了。p因此, 我們可以適時(shí)地依自己的需要, 選擇是否要在 標(biāo)籤中加上 value 屬性。37設(shè)定預(yù)設(shè)項(xiàng)目設(shè)定預(yù)設(shè)項(xiàng)目p在一般情況下, 網(wǎng)頁(yè)中的列表欄預(yù)設(shè)顯示第一個(gè)項(xiàng)目, 如果使用者未做其它選擇的時(shí)候,該列表欄傳回的值就是第一個(gè)項(xiàng)目的 value 值或其文字內(nèi)容。p如果想將其它的項(xiàng)目設(shè)定成預(yù)設(shè)的項(xiàng)目, 可在該項(xiàng)目的 標(biāo)籤中加上 selected 屬性,

16、例如：38設(shè)定預(yù)設(shè)項(xiàng)目設(shè)定預(yù)設(shè)項(xiàng)目p則一開(kāi)始出現(xiàn)在列表欄中的就是第三個(gè)項(xiàng)目了。399-3 列表欄的變化列表欄的變化p除了 name 屬性外, 標(biāo)籤中還可以加入其它屬性來(lái)控制列表欄的外觀或行為。n9-3-1 調(diào)整列表欄方框的大小n9-3-2 可選擇多項(xiàng)的列表欄409-3-1 調(diào)整列表欄方框的大小調(diào)整列表欄方框的大小p列表欄預(yù)設(shè)的大小只有一列, 要檢視列表中的其它選項(xiàng)都必須按下右邊的向下箭頭才會(huì)列出。p使用 size 屬性則可自由設(shè)定方框的大小, 例如改成 3 列, 這樣就只會(huì)列出 3 個(gè)選項(xiàng)供使用者選擇, 而使用者也可用列表欄右邊的捲軸來(lái)捲動(dòng)列表的內(nèi)容, 例如：419-3-1 調(diào)整列表欄方框的大

17、小調(diào)整列表欄方框的大小p當(dāng)我們用 size 屬性設(shè)定一個(gè)多列的列表欄時(shí), 列表欄右邊的按鈕就被換成一個(gè)可上下捲動(dòng)的捲軸了。429-3-2 可選擇多項(xiàng)的列表欄可選擇多項(xiàng)的列表欄p如果設(shè)定的列數(shù)超過(guò) 項(xiàng)目的個(gè)數(shù), 例如將上例改成 size=7, 則多出的三列都會(huì)變成空白。p如果列表欄是個(gè)複選題, 而不是只能選擇一項(xiàng)的單選題, 那麼只要加上 multiple 屬性即可, 此時(shí)使用者可同時(shí)按下 Ctrl 鍵及滑鼠左鈕,就可以在列表欄中選擇一個(gè)以上的項(xiàng)目, 例如：439-3-2 可選擇多項(xiàng)的列表欄可選擇多項(xiàng)的列表欄449-4 區(qū)塊式文字輸入欄位區(qū)塊式文字輸入欄位p使用 時(shí), 雖然可用 size 屬性設(shè)定

18、欄位的寬度, 不過(guò)仍是只有一列的輸入欄位, 如果輸入的文字超過(guò)欄位大小, 則文字就會(huì)往左推, 前面的字就看不到了。p如果要建立像是在留言板或討論區(qū)那樣的文字輸入欄位, 就要使用 標(biāo)籤了。和一般輸入欄位不同的是, 標(biāo)籤是成對(duì)出現(xiàn)的, 至於欄位的高度與寬度則是分別用 rows 及 cols 屬性來(lái)設(shè)定：459-4 區(qū)塊式文字輸入欄位區(qū)塊式文字輸入欄位469-4 區(qū)塊式文字輸入欄位區(qū)塊式文字輸入欄位p我們可以看到, 一開(kāi)始欄位右邊及下方的捲軸都是呈現(xiàn)不可使用的狀態(tài)。479-4 區(qū)塊式文字輸入欄位區(qū)塊式文字輸入欄位p由於 rows 及 cols 只是設(shè)定文字輸入欄在畫面上有幾列幾行, 所以在某一列輸入

19、超過(guò) cols 所指定的字元數(shù), 或是超過(guò) rows 所設(shè)的列數(shù)時(shí), 捲軸就會(huì)自動(dòng)變?yōu)榭蓲詣?dòng)的, 讓使用者能捲動(dòng)欄位內(nèi)容, 以便查看被捲出欄位外的內(nèi)容：p另外, 如果想在 的欄位中加上預(yù)設(shè)的輸入內(nèi)容, 可以放在 textarea . 標(biāo)籤之間, 例如：489-4 區(qū)塊式文字輸入欄位區(qū)塊式文字輸入欄位499-4 區(qū)塊式文字輸入欄位區(qū)塊式文字輸入欄位509-4-1 設(shè)定區(qū)塊式文字輸入欄自動(dòng)換設(shè)定區(qū)塊式文字輸入欄自動(dòng)換行行p這個(gè)屬性可用來(lái)設(shè)定在輸入超過(guò)欄位寬度的文字時(shí), 是否要自動(dòng)換行：n1. :當(dāng)設(shè)定 wrap=off 時(shí), 輸入的欄位會(huì)出現(xiàn)水平方向的捲軸。當(dāng)輸入的資料長(zhǎng)度超過(guò)欄位寬度的時(shí)候, 不

20、會(huì)自動(dòng)換行：511. :521. :539-4-1 設(shè)定區(qū)塊式文字輸入欄自動(dòng)換設(shè)定區(qū)塊式文字輸入欄自動(dòng)換行行n2.wrap=“virtual” 及 wrap=“physical”：這兩項(xiàng)在設(shè)定都會(huì)讓輸入的文字在超過(guò)欄位寬度時(shí)自動(dòng)換行。但是在送出資料時(shí), wrap=“virtual” 只有在按 Enter 鍵的地方會(huì)換行, 其它部份並不會(huì)自動(dòng)換行。而wrap=physical 則會(huì)依照螢?zāi)簧纤?jiàn)到的方式將輸入的資料送出。549-5 組織表單內(nèi)容組織表單內(nèi)容p介紹了這麼多的表單欄位後, 可開(kāi)始著手建立一個(gè)完整的表單了。以下就是一個(gè)使用了前述五種輸入欄位的簡(jiǎn)單範(fàn)例：559-5 組織表單內(nèi)容組織表單內(nèi)

21、容569-5 組織表單內(nèi)容組織表單內(nèi)容579-5 組織表單內(nèi)容組織表單內(nèi)容p這個(gè)範(fàn)例在 IE 中載入的情形就如圖所示：58欄位的存取設(shè)定欄位的存取設(shè)定p請(qǐng)注意！在上面的例子中, 每個(gè)輸入欄位都加上了一個(gè) tabindex=“編號(hào)” 的屬性, 這個(gè)屬性的作用是設(shè)定使用者按 Tab 鍵時(shí), 切換欄位的順序。p編號(hào)小的會(huì)先輪到, 在上例中我們?yōu)榱藴y(cè)試目的, 故意將最後面的清除清除鈕設(shè)成tabindex=“1, 也就是使用者按 Tab 鍵時(shí)第一個(gè)停留的欄位。59欄位的存取設(shè)定欄位的存取設(shè)定p不過(guò), 順序顛倒的作法不符合使用習(xí)慣, 不建議採(cǎi)用。若沒(méi)有設(shè)定這個(gè)屬性, 則各欄位順序預(yù)設(shè)是由上而下依序照輪。p

22、另一個(gè)指定欄位存取方式的屬性則是 accesskey, 其作用就是設(shè)定一個(gè)可直接移到該欄位的快捷鍵, 例如若設(shè)定：60欄位的存取設(shè)定欄位的存取設(shè)定p使用者只要按了Alt+M和Alt+F就可直接設(shè)定這兩個(gè)欄位, 不過(guò)Alt+M剛好是 IE 檔案功能表的快捷徑鍵, 所以使用者會(huì)無(wú)法按Alt+M來(lái)開(kāi)啟檔案功能表。p另外 accesskey 也可用在包括 a、area、button、legend (稍後會(huì)介紹)、和 textarea 等標(biāo)籤中, 大家可以善加利用之。619-5 組織表單內(nèi)容組織表單內(nèi)容p雖然這樣子的表單已經(jīng)能正常運(yùn)作了, 但大家是否覺(jué)得表單的內(nèi)容實(shí)在不夠整齊, 在上面的例子我們還得用 來(lái)區(qū)隔各項(xiàng)的輸入欄位。p其實(shí)有幾