第 9 章 建立互動式 表單.

Presentation on theme: "第 9 章 建立互動式 表單."— Presentation transcript:

1 第 9 章 建立互動式 表單

2 本章提要 9-1 建立表單－<form> 9-2 表單的各種輸入欄位 9-3 列表欄的變化
9-4 區塊式文字輸入欄位－<textarea> 9-5 組織表單內容

3 前言 在瀏覽網頁時, 常可看到讓來訪者留下意見、資料的設計, 提供雙向互動的機會, 這些可輸入資料的欄位, 統稱為表單 (Form)。
要設計可輸入資料的網頁並不困難, 麻煩的是如何處理使用者所輸入的資料。以目前而言, 大多數的表單資料都是透過 ASP (Active Server Page)、PHP (PHP: Hypertext Preprocessor)、CGI (Common Gateway Interface) 程式來處理。

4 前言 不過也有比較單純的處理方式, 就是將資料以電子郵件的方式寄到自己的電子信箱中, 事後再用人工或程式來處理這些郵件 (資料)。
為避免混入太多的程式設計內容, 在這一章不會詳細介紹 ASP、PHP、或 CGI 程式的寫法, 仍以說明建立表單的 HTML 標籤為主。

5 9-1 建立表單－<form> 所有的表單內容都是放在 <form> .. </form> 標籤之中, 包括表單中的說明文字、供使用者輸入的欄位等等。 在文件中可設定多個表單, 但是不能做巢狀的表單, 也就是不能在 <form> 標籤中加入第二個 <form> 標籤。以下先介紹如何設計表單中的欄位。

6 9-1-1 表單中的輸入欄位－<input>
在一般表單中所看到的輸入欄位, 幾乎都是用 <input> 標籤來設定的, 只要修改其中的屬性, 就會出現不同的輸入欄位。<input> 標籤的格式大致如下所示： 其中 type 屬性就是用來設定要使用的輸入欄位種類, 例如一般的文字輸入欄 (text)、單選鈕 (radio)、多選鈕 (checkbox)、或是按下後就會送出表單資料的按鈕 (button) 等等。

7 9-1-1 表單中的輸入欄位－<input>
value 屬性所設的初始值, 則是一開始就出現在該輸入欄位中的資料。 當表單資料送出時, 使用者在各欄位輸入的資料是以 『欄位名稱 = 資料值』 的方式送出, 所以為了方便程式能由其中萃取出合適的資訊 (或是供自己閱讀), 最好用 name 屬性為各欄位取一個比較有意義的名稱。接著會為您介紹各種資料輸入欄位的用法。

8 9-1-2 建立可輸入文字的欄位－ <input type="text">

9 9-1-2 建立可輸入文字的欄位－ <input type="text">
如果想要調整方框的長度, 則可再加上 size 屬性。若要限制使用者輸入的資料長度, 則可用 maxlength 加以設限, 例如： size 屬性將方框設定成 20 個字元寬, 但 maxlength 則限制了使用者只能輸入 10 個字元, 輸入滿 10 個字後, 就不能再輸入其它的字了。

10 9-1-3 建立可輸入密碼的欄位－<input type="password">
將 type 設為 passward, 則可得到一個與 text 相似的輸入欄位, 不過在這個密碼欄中輸入的文字在螢幕上都會以 『*』 或 『●』 符號取代, 例如： 這是為了達到保密的效果, 所以才以 "●" 取代使用者輸入的文字顯示在螢幕上。

11 9-1-4 建立送出資料的按鈕－ <input type="submit">
理論上, 所有的表單中都會有一個送出資料的按鈕, 當使用者按下此鈕時, 瀏覽器就會將使用者在表單中所輸入的資料送出。 使用 type="submit" 即可做出用來送出資料的按鈕, 由於不須從這個按鈕本身得到資料, 所以不用設定其 name 屬性 (當然您想要用的話仍可加上此屬性)。

12 9-1-4 建立送出資料的按鈕－ <input type="submit">
至於此時在 value 屬性所設的文字, 會變成出現在按鈕上的文字, 例如： 按鈕的大小會依 value 中的文字多寡自動調整, 像上面的例子用了 4 個字, 所以按鈕就變得稍微大了些。

13 9-1-5 建立清除輸入資料的按鈕－<input type="reset">

14 9-1-5 建立清除輸入資料的按鈕－<input type="reset">
重設鈕的 type 屬性就是要設為 reset, 同樣的我們可在 value 中設定出現在按鈕中的文字：

15 9-1-6 應用實例 現在就將上述的標籤都組合在一起, 形成一個簡單的表單, 讓大家實際了解表單資料的運作方式。為此, 我們只用了陽春的 <form> 標籤, 不加上任何的屬性 (當然在實際的應用上, 需加上後文所介紹的屬性)：

16 9-1-6 應用實例 您可試著在僅有的兩個欄位中輸入資料, 按下清除重填鈕, 試試 Reset 的功效。最後按下送出資料鈕送出資料,此時會發現在瀏覽器顯示目前 URL 的地方出現了如下的內容, 也就是在原有的 URL 後面, 被加上了一個問號及瀏覽程式所送出的資料：

17 9-1-6 應用實例

18 9-1-6 應用實例 相信由上面這個例子, 應能看出表單資料在傳送時, 其資料的排列方式, 就是依各欄位在表單中出現的先後次序, 依序以 '&' 分格排列。至於每一欄資料則套上了我們在 <input>標籤中用 name 屬性所設的內容而成為：『欄位的名稱=使用者輸入的值』的格式。

19 9-1-6 應用實例 以上面的例子來看可分析如下： 如果設計的表單是將資料寄到電子信箱中, 則郵件的附件內容也會和上面一樣。

20 9-2 表單的各種輸入欄位 除了文字輸入欄與按鈕之外, 單選鈕、多選鈕、列表欄、與多列文字欄也都在表單中經常出現, 另外還可以做出類似影像地圖的效果喔。

21 9-2-1 只能選擇一項的單選鈕－ <input type="radio">
至於要讓多個單選鈕成為同一組的選項, 只要將這幾個單選鈕的 name 屬性設定成相同的名稱即可, 例如：

22 9-2-1 只能選擇一項的單選鈕－ <input type="radio">
此時使用者只能選擇 『男』 或 『女』 這兩個性別中的一項。 選好後送出表單資料時, 資料中的 sex 會等於使用者所選欄位的 value 屬性值。例如選擇 『女』 時, 在表單資料中就會出現 sex="female"。

23 9-2-1 只能選擇一項的單選鈕－ <input type="radio">
另外要提醒您的是, radio 預設的 value 值為 On。也就是說, 如果上例中我們不設定 value 屬性的話, 被勾選的項目將會傳回 sex=“on”。 因此, 在只有單一個單選鈕的情況下, 我們大可不必設定其 value 屬性, 例如：

24 9-2-1 只能選擇一項的單選鈕－ <input type="radio">
只要在資料中有 male=“on” 這一組資料, 我們就知道使用者有選取此項了。 相反的,若有多個單選鈕, 則務必為每個單選鈕設定不同的 value, 否則不論勾選哪一個單選鈕都傳回 on, 就搞不清楚使用者倒底勾選了哪一項。

25 9-2-2 可重複選擇的多選鈕－ <input type="checkbox">

26 9-2-2 可重複選擇的多選鈕－ <input type="checkbox">
雖然它們的name都相同, 但若使用者選擇了一個以上的選項時, 在傳回的資料中就會出現一個以上的 leisure=... 的結果。 例如上圖勾選的 2 項, 其傳回的資料就會是 "leisure=日本賞櫻之旅& leisure=加拿大賞楓之旅"。

27 9-2-2 可重複選擇的多選鈕－ <input type="checkbox">
和單選鈕一樣, 多選鈕預設 value 值也是 On, 所以如果您不想設定那麼多個 value 屬性, 不妨將同一組的選項也都設定不同的 name, 只要在傳回的資料中看看有哪幾個等於 On 的值就可以了。

28 9-2-3 送出圖片的座標值－ < input type="image" >
使用影像做為輸入欄位時是以圖片做為使用者輸入的界面, 不過使用影像的輸入欄位時, 使用者所輸入的資料將是滑鼠在圖形上的座標值, 例如下面這個例子：

29 9-2-3 送出圖片的座標值－ < input type="image" >

30 9-2-3 送出圖片的座標值－ < input type="image" >
在這個影像輸入欄位中也可加入 align 標籤來調整圖形影像與後面文字的對齊方式。 此外使用影像輸入欄位時, 我們甚至不需使用 <input type = “submit”> 按鈕, 因為只要使用者用滑鼠在圖形上按一下, 資料就會立即送出, 送出的資料格式則如下所示：

31 9-2-4 下拉式的列表欄－ <select> 與 <optioin>
假設想設計在網頁上選擇月份, 使用者要在 12 個選項中選擇其中 1 個。如果我們使用單選鈕或多選鈕來設計, 則在畫面上就必須列出 12 個月份。 這時不妨考慮使用列表欄。列表欄就是在文件中常見的下拉式選單, 其中所列出的就是可供使用者 選取的項目：

32 9-2-4 下拉式的列表欄－ <select> 與 <optioin>
列表欄的製作方式要先用一對 <select> 標籤定義出列表欄及其出現的位置, 接著在其中加上 <option> 標籤, 定義每一個出現在列表中的項目：

33 9-2-4 下拉式的列表欄－ <select> 與 <optioin>
基本上, 製作列表欄就是這麼簡單, 不過如果要讓它真正能夠將使用者所選取的資料傳回, 必須再加上 name 及 value 屬性。 name 屬性要加在 <select> 標籤中, value 屬性則是要加在 <option> 標籤中,不過 value 屬性是可有可無的, 因為當使用者選擇了未設定 value 屬性的項目時, 送出的值就會是該項目的文字內容, 例如下面這個列表欄：

34 9-2-4 下拉式的列表欄－ <select> 與 <optioin>
當使用者選取的項目是日本賞櫻之旅這一項時, 瀏覽器傳回的資料會是 album="日本賞櫻之旅"。

35 9-2-4 下拉式的列表欄－ <select> 與 <optioin>
但這時會出現一個問題, 因為日本賞櫻之旅是中文, 傳回的資料會變成亂碼, 可能造成錯誤。如果我們將它改成：

36 9-2-4 下拉式的列表欄－ <select> 與 <optioin>
則選取日本賞櫻之旅這一項時, 瀏覽器傳回的資料會變成 album=“3”。如此就能避免中文變成亂碼的問題了。 因此, 我們可以適時地依自己的需要, 選擇是否要在<option> 標籤中加上 value 屬性。

37 設定預設項目 在一般情況下, 網頁中的列表欄預設顯示第一個項目, 如果使用者未做其它選擇的時候,該列表欄傳回的值就是第一個項目的 value 值或其文字內容。 如果想將其它的項目設定成預設的項目, 可在該項目的 <option> 標籤中加上 selected 屬性, 例如：

38 設定預設項目 則一開始出現在列表欄中的就是第三個項目了。

39 9-3 列表欄的變化 除了 name 屬性外, <select> 標籤中還可以加入其它屬性來控制列表欄的外觀或行為。
9-3-1 調整列表欄方框的大小－<select size> 9-3-2 可選擇多項的列表欄－<select multiple>

40 9-3-1 調整列表欄方框的大小－ <select size>
列表欄預設的大小只有一列, 要檢視列表中的其它選項都必須按下右邊的向下箭頭才會列出。 使用 size 屬性則可自由設定方框的大小, 例如改成 3 列, 這樣就只會列出 3 個選項供使用者選擇, 而使用者也可用列表欄右邊的捲軸來捲動列表的內容, 例如：

41 9-3-1 調整列表欄方框的大小－ <select size>

42 9-3-2 可選擇多項的列表欄－ <select multiple>
如果設定的列數超過 <option> 項目的個數, 例如將上例改成 size="7", 則多出的三列都會變成空白。 如果列表欄是個複選題, 而不是只能選擇一項的單選題, 那麼只要加上 multiple 屬性即可, 此時使用者可同時按下 [Ctrl] 鍵及滑鼠左鈕,就可以在列表欄中選擇一個以上的項目, 例如：

43 9-3-2 可選擇多項的列表欄－ <select multiple>

44 9-4 區塊式文字輸入欄位－ <text area>
使用 <input type="text"> 時, 雖然可用 size 屬性設定欄位的寬度, 不過仍是只有一列的輸入欄位, 如果輸入的文字超過欄位大小, 則文字就會往左推, 前面的字就看不到了。 如果要建立像是在留言板或討論區那樣的文字輸入欄位, 就要使用 <textarea> 標籤了。和一般輸入欄位不同的是, <textarea> 標籤是成對出現的, 至於欄位的高度與寬度則是分別用 rows 及 cols 屬性來設定：

45 9-4 區塊式文字輸入欄位－ <text area>

46 9-4 區塊式文字輸入欄位－ <text area>
我們可以看到, 一開始欄位右邊及下方的捲軸都是呈現不可使用的狀態。

47 9-4 區塊式文字輸入欄位－ <text area>
由於 rows 及 cols 只是設定文字輸入欄在畫面上有幾列幾行, 所以在某一列輸入超過 cols 所指定的字元數, 或是超過 rows 所設的列數時, 捲軸就會自動變為可捲動的, 讓使用者能捲動欄位內容, 以便查看被捲出欄位外的內容： 另外, 如果想在 <textarea> 的欄位中加上預設的輸入內容, 可以放在 textarea> ..</textarea> 標籤之間, 例如：

48 9-4 區塊式文字輸入欄位－ <text area>

49 9-4 區塊式文字輸入欄位－ <text area>

50 9-4-1 設定區塊式文字輸入欄自動換行－<textarea wrap>
這個屬性可用來設定在輸入超過欄位寬度的文字時, 是否要自動換行： 1.<textarea wrap="off"> : 當設定 wrap="off "時, 輸入的欄位會出現水平方向的捲軸。當輸入的資料長度超過欄位寬度的時候, 不會自動換行：

51 1.<textarea wrap="off"> :

52 1.<textarea wrap="off"> :

53 9-4-1 設定區塊式文字輸入欄自動換行－<textarea wrap>
2.wrap=“virtual” 及 wrap=“physical”： 這兩項在設定都會讓輸入的文字在超過欄位寬度時自動換行。但是在送出資料時, wrap=“virtual” 只有在按 [Enter] 鍵的地方會換行, 其它部份並不會自動換行。而wrap="physical" 則會依照螢幕上所見到的方式將輸入的資料送出。

54 9-5 組織表單內容 介紹了這麼多的表單欄位後, 可開始著手建立一個完整的表單了。以下就是一個使用了前述五種輸入欄位的簡單範例：

55 9-5 組織表單內容

56 9-5 組織表單內容

57 9-5 組織表單內容 這個範例在 IE 中載入的情形就如圖所示：

58 欄位的存取設定 請注意！在上面的例子中, 每個輸入欄位都加上了一個 tabindex=“編號” 的屬性, 這個屬性的作用是設定使用者按 [Tab] 鍵時, 切換欄位的順序。 編號小的會先輪到, 在上例中我們為了測試目的, 故意將最後面的清除鈕設成tabindex=“1", 也就是使用者按 [Tab] 鍵時第一個停留的欄位。

59 欄位的存取設定 不過, 順序顛倒的作法不符合使用習慣, 不建議採用。若沒有設定這個屬性, 則各欄位順序預設是由上而下依序照輪。
另一個指定欄位存取方式的屬性則是 accesskey, 其作用就是設定一個可直接移到該欄位的快捷鍵, 例如若設定：

60 欄位的存取設定 使用者只要按了[Alt]+[M]和[Alt]+[F]就可直接設定這兩個欄位, 不過[Alt]+[M]剛好是 IE 檔案功能表的快捷徑鍵, 所以使用者會無法按[Alt]+[M]來開啟檔案功能表。 另外 accesskey 也可用在包括 a、area、button、legend (稍後會介紹)、和 textarea 等標籤中, 大家可以善加利用之。

61 9-5 組織表單內容 雖然這樣子的表單已經能正常運作了, 但大家是否覺得表單的內容實在不夠整齊, 在上面的例子我們還得用 <hr> 來區隔各項的輸入欄位。 其實有幾個可以組織輸入欄位的標籤, 我們就先來看這幾個標籤的基本語法。

62 9-5-1 將多個輸入欄位框在一起－ <fieldset>
<fieldset> 標籤的用法很簡單, 只要將想放在一起的輸入欄位都放在 <fieldset>...</fieldset> 之中即可。

63 9-5-2 在框線顯示說明文字－ <legend>
<legend> 標籤需放在 <fieldset>...</fieldset> 之中, 它是用來做為 <fieldset> 欄位的說明, 在 <legend>...</legend> 中的文字會出現在 <fieldset> 的框線上面, 例如下面這個例子：

64 9-5-2 在框線顯示說明文字－ <legend>

65 9-5-2 在框線顯示說明文字－ <legend>
現在我們就將這兩個標籤套用在範例 ex09-05.html 中：

66 9-5-2 在框線顯示說明文字－ <legend>

67 9-5-2 在框線顯示說明文字－ <legend>

68 9-5-2 在框線顯示說明文字－ <legend>

69 9-5-2 在框線顯示說明文字－ <legend>
我們用 <fieldset> 標籤將欄位分組後, 整個表單看起來就比較整齊了：

70 9-5-3 建立搜尋用表單－<isindex>
另外還有一種表單標籤 <isindex>, 一般是做為資料庫查詢用的, 比較有趣的是, 這個標籤需放在 <head> 標籤之間。 使用這個標籤時, 文件中會出現一個文字輸入欄位, 在此輸入的內容就會成為查詢用的關鍵字, 例如：

71 9-5-3 建立搜尋用表單－<isindex>
action 屬性不一定要使用, 在未指定 action 屬性時, 輸入的內容將直接傳送到目前的 URL 上, 這也是一般 <isindex> 標籤較常使用的方式。 至於 prompt 屬性由上圖可看出, 我們可用這個標籤來設定輸入欄位前的提示文字。

72 9-5-3 建立搜尋用表單－<isindex>
如果省略 prompt 屬性, 瀏覽器會自動加入一段說明文字： 使用 <isinedx> 標籤不需用到 submit 鈕, 因為在使用者按下[Enter]鍵時, 瀏覽器就會送出使用者輸入的資料。 <isindex>標籤通常是做搜尋的, 而 <body>可用來放置有關搜尋的說明文字。