第 7 章

Size: px

Start display at page:

Download "第 7 章"

深立凤
5 years ago
Views:

1 表單的應用

2 本章重點認識表單元件加入文字欄位加入核取方塊與選項按鈕群組加入清單 / 選單加入表單按鈕 - 送出和重設按鈕以傳送表單內容檢驗表單欄位的正確性 2

3 認識表單元件表單與動態網頁程式在網頁上所看到的表單欄位, 其實只是一種輸入介面, 僅供瀏覽者輸入文字或選擇項目而已當按下這份表單的送出鈕後, 表單內容就會傳送到伺服器上, 並且由事先撰寫好的動態網頁程式 (ASP ASP.NET PHP 或 JSP 程式 ) 來接手處理 ( 例如將的留言內容加入目前網頁中並存到資料庫檔案裡 ) 3

4 表單與動態網頁程式最後伺服器再將處理結果傳回瀏覽者的電腦裡, 就變成了送出表單後所看到的畫面 4

5 Dreamweaver 提供的表單元件 Dreamweaver 提供了完整的表單元件, 可讓迅速做出表單外觀程式部份交由程式設計師來為的表單量身訂作或是選擇將表單內容透過傳送, 這種做法就完全不需要學習任何程式語言了請開啟一份新網頁, 然後切換到插入列的表單頁次, 就會所提供的各種表單元件 5

6 Dreamweaver 提供的表單元件 6

7 Dreamweaver 提供的表單元件底下就說明幾個較特別的表單元件表單按下此鈕後, 在網頁上會新增一個紅色虛線框, 這個虛線框即表示表單範圍, 在框框裡面的表單元件都屬於同一組表單當按下送出鈕後, 虛線框裡的表單資料都會一併傳送出去而不在同一個虛線框裡的表單資料則不受影響 7

8 Dreamweaver 提供的表單元件 8

9 Dreamweaver 提供的表單元件例如網頁中若有兩份獨立的問卷調查表, 最好把它們分別放在兩個不同的表單範圍 ( 虛線框 ) 裡, 以免互相影響在表單範圍外加入表單元件時,Dreamweaver 會主動詢問是否新增表單標籤 9

10 Dreamweaver 提供的表單元件隱藏欄位可插入隱藏式的表單欄位, 通常是用來儲存給程式使用所必須的參數但瀏覽者不需看到這些內容, 所以可用隱藏欄位來加以隱藏 10

11 Dreamweaver 提供的表單元件 11

12 Dreamweaver 提供的表單元件跳頁選單 : 清單 / 選單的一種, 只不過 Dreamweaver 利用 Script 語法, 讓它可以連結到所指定的各個網頁影像欄位 : 可插入影像以代替送出鈕, 當瀏覽者點選該影像之後, 同時會將滑鼠在影像上的座標值傳送出去, 有點類似影像地圖的功用不過實際在製作網頁時, 此功能較少使用檔案欄位 : 可讓瀏覽者指定自己電腦中的檔案, 通常用來指定上傳的檔案但上傳的動作仍須另外撰寫程式才能使用 12

13 Dreamweaver 提供的表單元件按鈕 : 按鈕最常見的就是送出鈕與重設鈕, 可傳送或清除表單內的資料標籤標記 : 可用來替表單中的項目加註說明文字不過通常不需自行按下此鈕來加入 <label> 標籤, 當在建立表單元件時, 即會自動開啟輸入標籤輔助功能屬性交談窗, 來協助做設定欄位集 : 可先將表單中數個類似或相關的項目選取起來, 然後按此鈕來加上欄位集外框 13

14 Dreamweaver 提供的表單元件以本書福拉格日本旅遊網站精選行程中的線上報名表網頁 (signup.html) 為例就含有多種表單元件本文介紹幾種常用表單元件的屬性設定, 可以將線上報名表網頁開啟以便對照學習 14

15 加入文字欄位在網頁中加入文字欄位請開啟一份新網頁, 然後切換到插入列的表單頁次, 練習如何在網頁中加入文字欄位 1. 在網頁中加入的表單元件可能不只一個, 為了讓表單元件能夠整齊排列, 可以利用表格來歸納請按下表單鈕, 插入表單虛線範圍, 接著將插入點移到虛線範圍中, 再插入表格 15

16 在網頁中加入文字欄位 16

17 在網頁中加入文字欄位 2. 請將插入點移到第一個儲存格中, 然後按下表單頁次下的文字欄位鈕 17

18 在網頁中加入文字欄位 3. 接著進行標籤標記的屬性設定 18

19 在網頁中加入文字欄位 4. 可在網頁中看到加入的文字欄位 19

20 在網頁中加入文字欄位 5. 請按 F12 鍵, 開啟瀏覽器來預覽 20

21 在網頁中加入文字欄位 6. 重複以上步驟, 再新增以下幾個文字欄位 21

22 設定欄位的名稱在網頁中插入表單元件時, 會跳出一個輸入標籤輔助功能屬性交談窗, 其中的 ID 欄就是用來指定表單元件的名稱如果沒有在 ID 欄中輸入名稱, 那麼 Dreamweaver 會自動幫欄位取名稱例如文字欄位的名稱就是 textfield textfield2... 依此類推 22

23 設定欄位的名稱 23

24 設定欄位的名稱為了讓 CSS JavaScript ASP PHP 等能正確取得各欄位的資料, 最好替每個表單欄位指定名稱通常會依據該欄位的性質來輸入名稱例如輸入地址的欄位可以指定 address 做為名稱輸入電話的欄位可以指定 tel 做為名稱雖然對程式的處理結果沒有影響, 但是當在查看瀏覽者送出來的資料時會比較容易辨別 24

25 設定欄位的名稱在點選該欄位後, 於屬性面板中修改在此以文字欄位為例其它表單元件的名稱也是同樣的修改方法 25

26 設定欄位的名稱 26

27 設定欄位的名稱了解欄位名稱的用途假設讓瀏覽者傳出純文字資料, 比較一下使用預設的欄位名稱跟指定欄位名稱的差異 27

28 標籤標記的用法在輸入標籤輔助功能屬性交談窗中, 可以讓在表單元件的前 ( 後 ) 加上說明文字此項功能會以 HTML 的 <label> </label> 標籤來定義其中的樣式選項, 則是可讓選擇 <label> 標籤的寫法 28

29 標籤標記的用法 29

30 標籤標記的用法 <label> 標籤最常應用在選項按鈕及核取方塊, 其好處是可以方便瀏覽者點選如加入了一組選項按鈕, 如果沒有加上 <label> 標籤, 當瀏覽者要點選某個選項時, 只能按一下選項按鈕來選取如果加入 <label> 的話, 那麼在說明文字上按一下, 也可以選取選項按鈕 30

31 單行式文字欄位單行式文字欄位還可將文字欄切換為多行或密碼欄位只要點選文字欄位, 在屬性面板中進行切換 31

32 單行式文字欄位單行式欄位最多只能輸入一行文字, 可用屬性面板來控制欄位的寬度, 以及限制瀏覽者最多只能輸入幾個字, 以免表單被人填到爆掉此外, 也可事先設定初始文字, 也就是讓欄位一開始就出現文字, 通常是用來做為輸入資料的範例 32

33 單行式文字欄位開啟練習檔 Ex21-02.html 進行練習選取聯絡電話文字欄位, 並開啟屬性面板進行設定 33

34 單行式文字欄位接著按下 F12 鍵開啟瀏覽器來預覽 34

35 多行文字欄位多行欄位可以容納好幾行文字, 通常用來讓瀏覽者留言或是輸入意見 ; 多行欄位除了同樣可調整寬度之外, 還可設定高度, 也就是一次可顯示幾行文字, 超過的行數必須用捲軸來瀏覽拉下屬性面板的換行列示窗還可設定換行方式, 預設會自動隨著欄位寬度換行, 若不想使文字內容自動換行可設成關閉請開啟練習檔 Ex21-03.html 建立了一個建議事項的文字欄位請選取文字欄位 35

36 多行文字欄位 36

37 多行文字欄位 37

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

39 密碼文字欄位 39

40 加入核取方塊與選項按鈕群組加入核取方塊製作複選題核取方塊也就是多選鈕其用途在於 : 當您設定了一組複選題, 其中的項目都是可以同時被選取的例如要詢問瀏覽者下次想去的旅遊地點, 一個人可能會選擇兩個以上的地點, 所以就適合用核取方塊來讓瀏覽者複選 40

41 加入核取方塊製作複選題要加入核取方塊, 只要將指標移到要插入的位置然後按下表單頁次上的核取方塊鈕即可接著同樣會出現輸入標籤輔助功能屬性交談窗讓進行標籤標記的設定, 可以參考之前建立文字欄位時的說明 41

42 加入核取方塊製作複選題開啟練習檔 Ex21-04.html 有事先加入好的核取方塊, 點選核取方塊可進行相關的屬性設定 42

43 加入選項按鈕群組製作單選題如果表單中有一堆選項, 而瀏覽者只能從中選擇其一的時候, 就要加入選項按鈕來讓瀏覽者做選擇 1. 請繼續沿用 Ex21-04.html, 將插入點移到房型欄, 然後按下表單頁次的鈕, 隨即會出現選項按鈕群組交談窗請依照下圖的操作, 要建立不同房型的選項按鈕 43

44 加入選項按鈕群組製作單選題 44

45 加入選項按鈕群組製作單選題 2. 接著, 請依照下圖的內容, 繼續輸入其他選項內容, 然後按下確定鈕 45

46 加入選項按鈕群組製作單選題 46

47 加入選項按鈕群組製作單選題選項按鈕群組預設會以直式排列, 若需要將選項做橫式排列, 只要移到每個項目最後, 按下 Delete 鍵, 將斷行符號刪掉, 即可排在同一行 47

48 加入選項按鈕群組製作單選題學會建立選項按鈕群組後, 再來練習建立一組人數的選項按鈕群組, 請參照下圖來建立 48

49 選項按鈕群組的名稱設定以選項按鈕群組建立的選單項目會有相同的名稱, 若使用選項按鈕來建立, 記得要將每一個選項按鈕的名稱設成一樣, 這樣瀏覽者才能只選擇其中一個項目以選擇性別為例, 若瀏覽者原本選擇 " 男 ", 後來又選擇 " 女 ", 那麼 " 男 " 項目應該要自動取消選取才對 ; 但如果兩個單選項目的欄位名稱不一樣, 那麼 " 男 " " 女 " 兩個選項將可以同時被選擇, 就違背了 " 單選 " 的意義 49

50 選項按鈕群組的名稱設定 Dreamwe aver 預設會將選項按鈕群組的欄位名稱依序以 RadioGr oup1 RadioGroup2 排列下去 ( 當然也可以自己更名 ); 若是不同的群組, 卻設成相同的名稱, 不論項目相隔多遠, 只要是在同一份表單中 ( 即在同一個表單虛線框裡 ), 仍然只有其中一個項目可以被選取 50

51 選項按鈕群組的名稱設定 51

52 核取值設定看到 " 性別 " 選項按鈕後面, 分別加上了 " 男 " " 女 " 等文字不過這是給瀏覽者看的, 而表單真正傳送出去的資料, 則是該選項的核取的值屬性所定義的內容所以必須把核取的值屬性改成相關文字, 這樣網站管理者收到瀏覽者送來的表單時, 才不會有一堆看不懂的訊息 52

53 核取值設定 53

54 核取值設定 54

55 加入清單 / 選單線上報名表網頁 signup.html 希望報名的人能夠填上學歷, 不過要供瀏覽者選擇的項目較多為了節省網頁空間, 所以可以使用清單 / 選單這個表單元件這樣只需要一行文字空間, 就可容納所有的學歷項目 55

56 加入清單 / 選單加入清單 / 選單元件設定選單中的選項值欄位要輸入什麼? 將選單改成條列式清單 56

57 加入清單 / 選單元件請開啟練習檔 Ex21-05.html 來練習將插入點移到性別欄之後, 按下表單頁次的清單 / 選單鈕 57

58 加入清單 / 選單元件 58

59 設定選單中的選項目前清單 / 選單沒有任何內容, 所以接著要加入一些可供瀏覽者選擇的學歷項目進去, 選單的寬度會隨著所加入的內容而自動調整 1. 要設定清單 / 選單中的內容, 請在選取清單 / 選單後, 按下屬性面板的清單值鈕 59

60 設定選單中的選項 2. 出現清單值交談窗後, 請在項目標籤欄中, 加入想放在選單中的項目, 完畢後按下確定鈕 60

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

62 設定選單中的選項 4. 最後按下 F12 鍵使用瀏覽器來預覽此網頁, 看看清單 / 選單是否能正常運作 62

63 值欄位要輸入什麼? 清單值交談窗分為項目標籤與值兩個欄位, 照理來說, 項目標籤欄的內容是給瀏覽者觀看的, 真正傳送到伺服器的資料則是值欄位裡的內容, 所以應該還要在值欄裡輸入同樣的文字才對不過實際上, 沒有在值欄中輸入任何資料, 表單在傳送時將會自動送出項目標籤的內容, 因此通常值欄位可以不用輸入資料 63

64 值欄位要輸入什麼? 64

65 將選單改成條列式清單也可以將選單中的項目一次都列出來, 讓瀏覽者不必拉下選單也可以看到所有內容, 這種類型的元件就稱為清單 (List) 雖然這樣比較佔空間, 但有個好處是可以複選至於要使用選單或是清單, 就看的版面如何設計 65

66 將選單改成條列式清單請選取清單 / 選單元件然後在屬性面板中如下設定 66

67 將選單改成條列式清單請練習在出生日期欄中建立選單供瀏覽者點選 67

68 加入表單按鈕 - 送出和重設按鈕在加入了林林總總的表單元件之後, 線上報名表最後必須放置一個送出資料的按鈕瀏覽者如何傳送表單送出資料鈕放一個可清除資料的重設鈕當瀏覽者想重新填寫表單內容時, 可按下此鈕清除所有寫好的內容這兩種按鈕都內建在 Dreamweaver 中 68

69 加入表單按鈕 - 送出和重設按鈕練習在網頁中加入送出及重設按鈕 1. 請開啟練習檔 Ex21-06.html 將插入點移到表格的最後 ( 注意 : 要在紅色的表單範圍內 ) 然後按下表單頁次的鈕 69

70 加入表單按鈕 - 送出和重設按鈕 70

71 加入表單按鈕 - 送出和重設按鈕 2. 接著會開啟插入標籤輔助功能屬性交談窗, 請按下取消鈕, 不加入標籤標記, 隨即可在網頁中看到插入的按鈕 71

72 加入表單按鈕 - 送出和重設按鈕 3. 接著請在送出資料鈕旁邊, 再加上一個按鈕, 讓瀏覽者可以按下這個按鈕來清除表單中的資料請在選取按鈕後, 由屬性面板中做設定 72

73 以傳送表單內容編輯至此整個表單內容算是很完整可是當瀏覽者按下送出資料鈕後, 表單資料會送到哪裡去呢? 這就要看的設定了通常會連結到遠端的應用程式伺服器, 讓表單傳送給程式處理, 並將表單資料存至資料庫中如果想用陽春一點的方式, 也可以讓表單資料透過傳送給, 請跟著以下的步驟進行 73

74 以傳送表單內容 1. 請開啟練習檔 Ex21-07.html 然後點選表單範圍的紅色虛線框屬性面板會切換到整份表單的屬性設定模式請在動作欄裡輸入連結, 表示將送出表單的動作交由來處理, 語法是 74

75 以傳送表單內容 75

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

77 以傳送表單內容 3. 將屬性面板的方法改為 POST 77

78 以傳送表單內容 4. 最後在編碼類型欄位中自行輸入 :text/plain 將傳送出去的表單資料類型設為純文字不然收信者可能會看到一堆亂碼 78

79 以傳送表單內容設定完畢請開啟瀏覽器來測試一下 ( 別忘了先連上 Internet) 在填完了一堆欄位後, 按下送出資料鈕, 將以傳送資料 79

80 以傳送表單內容 80

81 以傳送表單內容 81

82 以傳送表單內容請開啟郵件軟體 ( 如 Windows Mail) 收到這封信所看到的內容如下這就表示資料已經傳送成功 82

83 以傳送表單內容 83

84 以傳送表單內容儲存好附加檔案後, 請開啟記事本, 然後執行檔案 / 開啟舊檔命令, 開啟剛才儲存的附加檔案 84

85 以傳送表單內容 85

86 以傳送表單內容使用電子郵件的做法來傳送表單資料, 並不是理想的做法, 因為各家瀏覽器的支援程度差異很大最好還是搭配後端的程式及資料庫來處裡, 這裏只是讓您了解表單的用法 86

87 檢驗表單欄位的正確性通常是在 ASP PHP 程式中事先檢查各表單欄位的正確性如果瀏覽者傳送到伺服器的資料不符規定 ( 例如有些必要的欄位沒有填或是格式不正確 ), 那麼就不會處理這筆資料, 而會告訴瀏覽者哪裡有問題, 等修正並重新傳送後才會接受在填寫表單時, 避免漏掉某個欄位或者填錯內容沒有撰寫任何程式, 無法為每一個欄位設定很周密的檢驗條件 Dreamweaver 可以利用 Spry 的驗證功能, 讓瀏覽器來幫檢查各欄位的正確性 87

88 檢驗表單欄位的正確性現在將說明 Spry 的驗證功能, 檢查瀏覽者輸入的資料是否正確 Spry 的驗證功能可針對文字欄位文字區域核取方塊以及清單做驗證 88

89 檢驗表單欄位的正確性文字欄位的驗證驗證資料的時機文字區域的驗證核取方塊的驗證清單的驗證 89

90 文字欄位的驗證文字欄位是最常使用的表單元件舉凡姓名電子郵件帳號身份證字號信用卡資料郵遞區號等, 都會用到文字欄位為了避免瀏覽者輸入錯誤資料, 可以在建立表單元件時, 就加入 Spry 驗證文字欄位透過屬性面板的設定, 就可立即完成驗證欄位的工作 90

91 文字欄位的驗證 91

92 文字欄位的驗證 1. 請開啟一份新網頁, 然後切換到插入工具列的表單頁次, 按下 Spry 驗證文字欄位鈕, 來練習建立一個電子郵件的驗證欄位 2. 接著會出現提示訊息, 要求先儲存網頁, 將網頁存檔後, 會開啟插入標籤輔助功能屬性交談窗, 如下設定 92

93 文字欄位的驗證 93

94 文字欄位的驗證 94

95 文字欄位的驗證 3. 其實插入 Spry 驗證文字欄位和一般建立文字欄位的操作是一樣的, 差別在於 Spry 驗證文字欄位會多了一些驗證的屬性當將指標移到 Spry 驗證文字欄位附近時, 按一下亮藍色的標籤即可在屬性面板中看到驗證欄位的各項設定 95

96 文字欄位的驗證 96

97 文字欄位的驗證 4. 請拉下屬性面板的類型欄, 選擇電子郵件地址, 在預覽狀態欄中選擇格式無效, 並勾選驗證於的 onblur 項目 97

98 文字欄位的驗證 5. 設定好之後, 請開啟瀏覽器來預覽 98

99 文字欄位的驗證符號, 所以出現錯誤訊息 99

100 文字欄位的驗證 6. 將錯誤的電子郵件帳號更正後, 文字欄位的底色就會變綠色, 而格式無效的訊息也會消失 100

101 文字欄位的驗證文字欄位可驗證的類型很多, 以下再舉二個例子範例一 : 在建立網路商店線上購物之類的網站, 信用卡欄位的驗證相當重要, 因為牽涉到金錢交易, 為了避免瀏覽者輸入無效的資料, 可以透過底下的操作, 先做好第一關的把關, 後續與銀行的連線驗證信用卡等就交由其他程式處理 101

102 文字欄位的驗證 102

103 文字欄位的驗證 103

104 文字欄位的驗證範例二 : 在表單中建立日期欄位也是非常普遍的應用, 但如果沒有特別標註的話, 瀏覽者可能不知道該填入年 / 月 / 日月 / 日 / 年或是日 / 月 / 年等格式 ; 而且如果日期欄位不是以清單的方式讓瀏覽者點選, 很可能還會填入錯誤的資料, 例如月份只有 12 個月, 但可能有人會誤填超過 12 的數值所以可以建立一個日期驗證欄位, 幫助瀏覽者填入資料 104

105 文字欄位的驗證 105

106 文字欄位的驗證 106

107 文字欄位的驗證 107

108 驗證資料的時機要驗證瀏覽者輸入的資料是否符合格式有 3 個時間點可設定, 可以在屬性面板中的驗證於做選擇 108

109 驗證資料的時機 onblur: 當瀏覽者在文字欄位外按一下, 就會進行驗證 onchange: 當瀏覽者變更文字欄位中的內容時, 就會進行驗證 onsubmit: 當瀏覽者按下送出鈕將表單送出時, 就會進行驗證在實務應用上, 使用 onblur 及 onsubmit 的做法比較多 109

110 文字區域的驗證文字區域通常用來讓瀏覽者輸入內容較多的資料, 像是留言內容意見發表等為了避免輸入大量不相干的資料佔版面, 可以設定文字區域的字數限制 1. 請開啟一份新網頁, 按下表單頁次下的 Spry 驗證文字區域鈕 110

111 文字區域的驗證 2. 請依照畫面指示儲存網頁, 並建立好一個留言內容的文字區域 111

112 文字區域的驗證 3. 接著選取 Spry 標籤, 在屬性面板進行以下的設定要限制文字區域最少得輸入 8 個字元, 最多不能超過 200 個字元 112

113 文字區域的驗證 113

114 文字區域的驗證 4. 請開啟瀏覽器來預覽 114

115 文字區域的驗證 115

116 核取方塊的驗證核取方塊的驗證, 最常見的應用就是在加入會員時, 有些網站會提出使用同意聲明, 在看過這些聲明後, 要按下我同意或是我認同的核取按鈕, 才能繼續進行下個步驟, 當網站有需要此類的設計時, 就可以使用核取方塊的驗證 1. 要做核取方塊的驗證, 請開啟一份新網頁, 然後按下表單頁次下的 Spry 驗證核取方塊鈕 116

117 核取方塊的驗證 2. 依指示儲存網頁後, 並進行表單元件的標籤設定, 即可建立一個 Spry 驗證核取方塊 117

118 核取方塊的驗證 3. 選取此核取方塊, 在屬性面板進行設定 118

119 核取方塊的驗證 4. 最後開啟瀏覽器來測試一下此核取方塊 119

120 清單的驗證在建立清單 / 選單時, 想讓清單一開始呈空白狀態, 可以在第一個清單項目中輸入一個全形空白若不希望瀏覽者送出這個空白項目, 可以加上驗證, 提醒瀏覽者要選擇一項清單項目 120

121 清單的驗證 121

122 清單的驗證 1. 做選取項目的驗證, 請開啟一份新網頁, 然後按下表單頁次下的 Spry 驗證選取鈕 122

123 清單的驗證 2. 依指示儲存網頁, 並進行表單元件的標籤設定, 即可建立一個清單 / 選單, 請依照之前所教的方法, 在屬性面板替清單 / 選單建立清單項目 123

124 清單的驗證 3. 接著選取 Spry 標籤, 即可在屬性面板進行驗證設定 124

125 清單的驗證 4. 最後, 請開啟瀏覽器來測試一下結果 125

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling