互動表單的應用.

Presentation on theme: "互動表單的應用."— Presentation transcript:

1 互動表單的應用

2 認識表單元件 表單 (Form) 是網站管理者與瀏覽者互動的一種媒介, 它的應用範圍很廣, 例如製作留言板、討論區、搜尋引擎、會員申請表、線上刷卡購物、問卷調查表...等, 其目的不外乎就是先收集瀏覽者所輸入的資料, 然後再做後續的應用。

3 認識表單元件

4 表單與 CGI、ASP 我們在網頁上所看到的表單欄位, 其實只是一種輸入介面, 僅供瀏覽者打字或選擇項目而已, 當你按下這份表單的「送出」 鈕之後, 表單內容就會傳送到伺服器上, 並且由事先撰寫好的 CGI 或 ASP 程式來接手處理, 最後伺服器再將處理結果傳回瀏覽者的電腦裡, 就變成了我們送出表單後所看到的畫面。

5 表單與 CGI、ASP 由此可知, 表單必須依賴 CGI 或 ASP 程式, 才能真正發揮其功用, 否則只是一個空殼而已。

6 表單元件的另一種用途 表單元件也可以利用 Script 語法加以控制, 使其不必透過程式及伺服器即可產生特殊的效果；例如 18-6 節範例中, 可選擇連結頁面的下拉式表單, 就是用 JavaScript 來達成的。 如果你不會撰寫 Script, 只要借助行為 (Behavior) 的幫忙, 仍可做出許多不錯的效果。

7 Dreamweaver 提供的表單元件 Dreamweaver 提供了完整的表單元件, 雖然你可能不會撰寫 CGI 或 ASP 程式, 但仍可以利用 Dreamweaver 迅速做出表單外觀, 至於程式部份, 則可交由程式設計師來為你的表單量身訂作；或選擇最簡單的方法, 將表單內容透過 傳送到你的信箱, 這種做法就完全不需要任程式語言了。

8 Dreamweaver 提供的表單元件 請開啟表單面板, 就會看到 Dreamweaver 所提供的各種表單元件：

9 Dreamweaver 提供的表單元件 表單：按下此鈕後, 網頁上會出現一個紅色虛線框, 即表示表單範圍, 在框框裡面的表單元件都屬於同一組表單, 當你按下「送出」鈕後, 虛線框裡的表單資料都會被傳送出去。 文字欄位：可供瀏覽者輸入文字、留言, 亦可將輸入的文字以 ● 號顯示, 以做為密碼欄位。

10 Dreamweaver 提供的表單元件 隱藏欄位：可插入隱藏式的表單欄位, 通常是用來儲存給 CGI 或 ASP 程式所必須的參數, 但瀏覽者不須看到這些內容, 所以可加以隱藏。 文字區域：插入文字區域可直接讓瀏覽者輸入多行文字, 例如意見欄、自我介紹等。 核取方塊：插入多選鈕, 可供瀏覽者自由複選。

11 Dreamweaver 提供的表單元件 選項按鈕：插入單選鈕, 同一組單選鈕中只有一個可以被選取, 所以通常作為問卷中的單選題 (例如詢問瀏覽者的性別)。 選項按鈕群組：可直接設定問卷中同一個問題的數個選項, 但是瀏覽者只能選擇其中一個項目。此功能其實和選項按鈕完全相同, 只是一次可插入多個選項鈕, 並可用同一個交談窗來設定內容。

12 Dreamweaver 提供的表單元件 清單/選單：可將選項集中到清單/選單中, 然後讓瀏覽者選擇其中的項目。
清單/選單：可將選項集中到清單/選單中, 然後讓瀏覽者選擇其中的項目。 跳頁選單：其實這就是清單/選單的一種, 只不過 Dreamweaver 利用 Script 語法, 讓它可以連結到你所指定的各個網頁。 影像欄位：可插入影像以代替 "送出" 鈕, 當瀏覽者點選該影像之後, 同時會將滑鼠在影像上的座標值傳送出去, 有點類似影像地圖的功用。

13 Dreamweaver 提供的表單元件 檔案欄位：可讓瀏覽者選擇自己電腦中的某個檔案, 然後上傳到遠端伺服器裡, 不過上傳的動作必須另外撰寫程式才能使用。 按鈕：最常見的是 "送出" 鈕與 "重設" 鈕, 可傳送或清除表單內的資料；而利用 Script 語法, 也可以另外賦予按鈕特殊的功能, 例如按下按鈕就連結到其他網頁。

14 Dreamweaver 提供的表單元件 標籤標記：可用來替表單中的項目加註說明文字。此功能會以 "<label>" HTML 標籤將加註的文字與加註的項目括在一起, 而成為一個單元。 欄位集：您可先將表單中數個類似或相關的項目選取起來, 然後按此鈕來加上欄位集外框。不過請注意, 欄位集的框線要在瀏覽器中才看得到。

15 Dreamweaver 提供的表單元件

16 加入文字欄位 請開啟一個新網頁, 然後切換到表單面板, 按面板上的文字欄位鈕, 即可在插入點處加入一行文字欄位；如果網頁上沒有任何表單虛線範圍, Dreamweaver 會詢問是否要自動建立一個表單範圍：

17 加入文字欄位

18 加入文字欄位 為使瀏覽者知道欄位該輸入什麼資料, 我們必須在各欄位前面打字, 以註明每個欄位的用途：

19 如何刪除表單虛線範圍？ 若要刪除表單範圍, 只要用滑鼠點選紅色框框的「框線」, 就表示選取了整個表單範圍, 而狀態列左下角的 <form> 標籤也會變成選取狀態, 此時只要按下 [Delete] 鍵, 即可刪除整個紅色虛線框了。

20 如何刪除表單虛線範圍？

21 設定文字欄位的形式 我們還可將文字欄切換為多行或密碼欄位；請點選一個文字欄位, 便可在屬性面板中進行切換：

22 單行式文字欄位 單行式欄位只能輸入一行文字, 請用屬性面板來控制欄位的寬度及字數限制。也可事先設定初始文字, 通常用來做為輸入資料的範例。

23 單行式文字欄位

24 多行文字欄位 多行欄位可以容納好幾行文字, 通常用來讓瀏覽者留言或是輸入意見；多行欄位還可設定高度, 也就是一次可顯示幾行文字, 超過的行數必須用捲動軸來瀏覽。 拉下換行列示窗可設定換行方式, 預設會自動隨著欄位寬度換行, 若不想使文字內容自動換行, 可將之設成關閉。

25 多行文字欄位

26 多行文字欄位

27 密碼文字欄位 如果某些文字欄位的資料需要保密, 可將該欄位設成密碼形式, 此時所輸入的文字都會以 ● 符號表示, 以防止旁邊有人偷看；當然囉, 當這筆資料送到遠端伺服器後, 仍會顯示成真正的文字內容。

28 密碼文字欄位

29 設定欄位的名稱 為了讓 CGI 或 ASP 程式能正確取得各欄位的資料, 我們必須為每一個表單欄位設定名稱, 而且在同一組表單範圍中, 欄位名稱不可重複 (單選鈕可以例外)。 插入文字欄位或其它表單元件時, Dreamweaver 會自動幫各欄位命名, 例如文字欄位是 textfield、 textfield2...依序排列。

30 設定欄位的名稱 為了方便記憶, 一般會依該欄位的性質來取個相關的名稱, 例如輸入地址的欄位會取做 "address"、輸入電話的欄位會取做 "tel", 雖然對程式的處理結果沒有影響, 但我們在查看瀏覽者送出來的資料時會比較方便。 要更改欄位名稱, 可在點選該欄位後, 於屬性面板中修改 。

31 設定欄位的名稱

32 設定欄位的名稱

33 加入核取方塊 核取方塊也就是多選鈕, 其用途在於：當您設定了一組複選題, 其中的項目都是可以同時被選取的；例如我們要詢問瀏覽者使用的相機品牌, 由於一個人可能使用兩種以上的廠牌, 所以就用核取方塊來讓瀏覽者複選。

34 加入核取方塊 請開啟練習檔ex16-01.htm, 點選事先加入的核取方塊, 進行相關的屬性設定：

35 加入選項按鈕 如果表單中有一堆選項, 而瀏覽者只能從中選擇其一的時候 (如詢問性別), 就可加入單選鈕來讓瀏覽者做選擇。

36 加入選項按鈕群組 通常單選的題目都不會只有一個選項, 我們可按多次單選鈕, 再將每個選項內容標示清楚, 或者是按下選項按鈕群組鈕, 一次設定好群組內的選項。 例如練習檔 ex16-01.htm 中的參賽類別及檔案格式就是選項按鈕群組的應用：

37 加入選項按鈕群組

38 加入選項按鈕群組

39 加入選項按鈕群組 無論是設定選項按鈕或選項按鈕群組, 同一組單選項目的欄位名稱一定要相同, 這樣瀏覽者才能只選擇其中一個項目。
以選擇性別為例, 若瀏覽者原本選擇 "男", 後來又選擇 "女", 那麼 "男" 項目應該要自動取消選取才對；但如果兩個單選項目的欄位名稱不一樣, 那麼 "男"、"女" 兩個選項將可以同時被選擇。

40 加入選項按鈕群組

41 加入選項按鈕群組

42 不同選項群組的名稱必須不一樣 Dreamweaver 預設會將所有的選項按鈕的名稱都設成一樣, 但若是使用選項按鈕群組來設定, 欄位名稱就會依序以 "RadioGroup1"、"RadioGroup2"…排列下去；若是不同的群組, 卻設成相同的名稱, 不論項目相隔多遠, 只要是在同一份表單中 (即在同一個表單虛線框裡), 仍然只有其中一個項目可以被選取。

43 不同選項群組的名稱必須不一樣

44 核取的值屬性設定 我們看到 "性別" 選項後面, 分別加上了 "男"、"女" 等文字, 不過這是給瀏覽者看的, 而真正傳送出去的資料, 則是該選項的核取的值屬性所定義的內容, 所以我們必須把核取的值屬性改成相關的文字。

45 核取的值屬性設定

46 核取的值屬性設定

47 加入清單/選單 在報名表網頁中, 我們要詢問瀏覽者的職業, 由於所列出的職業項目很多, 為了節省網頁空間, 所以我們決定採用清單/選單, 這樣只需一行文字的空間, 就可容納所有的職業項目。 加入清單/選單 設定選單中的選項 將選單改成條列式清單

48 加入清單/選單 請開啟練習檔 ex16-02.htm, 將插入點移到職業：文字之後, 然後按下表單面板的清單/選單鈕：

49 設定選單中的選項 選取清單/選單元件後, 按下屬性面板的 清單值鈕。
選取清單/選單元件後, 按下屬性面板的 清單值鈕。 接著會出現清單值交談窗, 請在項目標籤欄位加入想放在選單中的項目, 完畢後按下確定鈕離開。

50 設定選單中的選項

51 數值欄要輸入什麼東西？ 清單值交談窗分為項目標籤與值兩個欄位, 照理說, 項目標籤欄的內容是給瀏覽者觀看的, 真正傳送到伺服器的資料則是值欄位裡的內容, 所以我們應該還要在值欄裡輸入同樣的文字才對。 實際上, 若沒有在值欄輸入任何內容, 傳送時將自動送出項目標籤的內容, 因此大多數情況下, 值欄位不需輸入文字。

52 數值欄要輸入什麼東西？

53 設定選單中的選項 如果想讓選單一開始就固定在某個特定的項目, 則可在屬性面板中設定：

54 設定選單中的選項 用瀏覽器來預覽此網頁, 看看下拉式選單是否能正常運作：

55 將選單改成條列式清單 你也可以將選單中的項目一次都列出來, 讓瀏覽者不必拉下選單也可以看到所有內容, 這種類型的元件就稱為清單 (List)；雖然這樣比較佔空間, 但有個好處是可以複選！

56 將選單改成條列式清單

57 加入表單按鈕 表單最後必須放置一個「送出資料」的按鈕, 讓瀏覽者把表單傳送給過來。
通常還會再放一個可清除資料的「重設鈕」, 當瀏覽者想重新填寫表單內容時, 可按下此鈕清除所有寫好的內容。

58 加入送出鈕和重設鈕 請按下表單面板的按鈕鈕, 即可在插入點處加入一個按鈕, 預設的按鈕形式是 「送出鈕」(Submit)。
可另外再加入一個按鈕, 即「重設鈕」(Reset), 然後切換屬性面板中的動作種類：

59 加入送出鈕和重設鈕

60 加入送出鈕和重設鈕 如果要更改按鈕上面的文字, 請在屬性面板的標籤欄位裡設定：

61 用 Script 語法來定義按鈕用途 按鈕的作用除了「送出」與「重設」兩種, 你還可以用 Script 來自訂按鈕的用途, 如果不會 Script 語法也沒關係, 因為行為 (Behavior) 所內建的各種效果已足夠你使用了。 以下我們做個簡單的例子, 讓瀏覽者按一下按鈕, 就可連結到另外一個網頁：

62 用 Script 語法來定義按鈕用途

63 用 Script 語法來定義按鈕用途 請開啟練習檔 ex16-03.htm, 在網頁上插入一個按鈕, 由於我們不是要製作整份表單, 所以照理可不必加入表單虛線範圍；不過要注意的是, 若沒有產生表單範圍, 則按鈕在 Netscape 上可能會沒有作用, 所以最好還是加入表單範圍。

64 用 Script 語法來定義按鈕用途

65 用 Script 語法來定義按鈕用途 點選按鈕, 在屬性面板中將動作設為無,；你可以修改一下按鈕上的文字, 並將按鈕設為置中對齊。

66 用 Script 語法來定義按鈕用途 選取按鈕並開啟行為面板, 按下新增項目鈕, 選擇『前往 URL』動作。

67 用 Script 語法來定義按鈕用途 在交談窗的 URL 欄中指定連結網頁, 再按下確定鈕就完成了；請用瀏覽器來測試看看哦！

68 用 傳送表單內容 通常當瀏覽者按下「送出鈕」後, 表單資料會連結到遠端的應用程式伺服器, 傳送給程式處理, 並將表單資料存至資料庫中；如果想用陽春一點的方式, 也可以讓表單資料透過 傳送給你。

69 用 傳送表單內容 請開啟練習檔 ex16-05.htm , 然後點選表單範圍的紅色虛線框, 此時屬性面板會切換到整份表單的屬性設定模式, 請在動作欄裡輸入 連結, 表示將「送出表單」的動作交由 來處理, 語法是：

70 用 傳送表單內容

71 用 傳送表單內容 若想讓傳送過來的 都具有相同的主旨, 可以直接在 連結後面加上主旨內容, 語法是 ?subject=主旨內容：

72 用 傳送表單內容 將屬性面板的方法改為 POST, 由於表單預設的處理方法通常為 GET, 所能處理的資料量比較少, 現在大部份都是用 POST 的處理方式。

73 用 傳送表單內容 在編碼類型欄位中輸入 text/plain, 將傳送出去的表單資料類型設為純文字, 否則當你收到別人傳送過來的 時, 可能會看到一堆亂碼。

74 用 傳送表單內容 設定完畢之後, 請用瀏覽器來測試一下是否可正常傳送 (別忘了先連上 Internet) ；例如以 Internet Explorer 來測試報名表網頁, 在填完了一堆欄位後, 按下送出報名表鈕, 就出現如下的交談窗, 告訴你即將以 傳送資料：

75 用 傳送表單內容

76 用 傳送表單內容 當網站管理者收到郵件後, 會看到如下的內容：

77 檢驗表單欄位的正確性 一般在 CGI 或 ASP 程式中, 都會事先檢查各表單欄位的正確性, 如果瀏覽者傳送到伺服器的資料不符合規定, 就不會處理這筆資料, 而會告知瀏覽者哪裡有問題, 等修正並重新傳送後才會處理。 在本章的例子中, 並沒有用到 CGI 或 ASP 程式, 所以無法為每一個欄位設定很周密的檢驗條件, 不過我們可以改用 Script 語法, 讓瀏覽器來幫你檢查各欄位的正確性, 至少可做到最基本的篩選。

78 檢驗表單欄位的正確性 在行為面板裡就有一組事先寫好的 Script, 可以幫你檢驗表單欄位的資料；假設我們要對 欄位做限制, 使該欄位裡的資料必須符合 格式, 那麼可如下操作：

79 檢驗表單欄位的正確性 請開啟 ex16-06.htm, 選取表單中的姓名欄位, 在行為面板中按下新增項目鈕, 選擇『檢驗表單』動作。

80 檢驗表單欄位的正確性 交談窗中會出現目前表單裡所有的文字欄位, 請選擇一個想要做檢驗的欄位, 再指定其限制條件即可。

81 檢驗表單欄位的正確性 請使用瀏覽器來測試表單的驗証功能。如果我們沒有在姓名欄位裡輸入資料那麼當插入點離開該欄位時, 就會跳出一個交談窗, 告訴你資料格式有誤, 請重新修正吧！

82 檢驗表單欄位的正確性

83 將交談窗訊息改成中文 由於驗証表單的 Script 碼是由 Dreamweaver 幫你撰寫的, 所以預設的錯誤訊息都以英文顯示；如果你懂得一點 Script 語法, 也可以切換到程式碼模式, 將相關的英文訊息都改成中文字。

84 將交談窗訊息改成中文