表單的應用
本章重點 認識表單元件 加入 文字欄位 加入 核取方塊 與 選項按鈕群組 加入 清單 / 選單 加入表單按鈕 - 送出 和 重設 按鈕 以 E-mail 傳送表單內容 檢驗表單欄位的正確性 2
認識表單元件 表單與動態網頁程式 在網頁上所看到的表單欄位, 其實只是一種輸入介面, 僅供瀏覽者輸入文字或選擇項目而已 當按下這份表單的 送出 鈕後, 表單內容就會傳送到伺服器上, 並且由事先撰寫好的動態網頁程式 (ASP ASP.NET PHP 或 JSP 程式 ) 來接手處理 ( 例如將的留言內容加入目前網頁中並存到資料庫檔案裡 ) 3
表單與動態網頁程式 最後伺服器再將處理結果傳回瀏覽者的電腦裡, 就變成了送出表單後所看到的畫面 4
Dreamweaver 提供的表單元件 Dreamweaver 提供了完整的表單元件, 可讓迅速做出表單外觀 程式部份 交由程式設計師來為的表單量身訂作 或是選擇將表單內容透過 E-mail 傳送, 這種做法就完全不需要學習任何程式語言了 請開啟一份新網頁, 然後切換到插入列的表單頁次, 就會所提供的各種表單元件 5
Dreamweaver 提供的表單元件 6
Dreamweaver 提供的表單元件 底下就說明幾個較特別的表單元件 表單 按下此鈕後, 在網頁上會新增一個紅色虛線框, 這個虛線框即表示表單範圍, 在框框裡面的表單元件都屬於同一組表單 當按下 送出 鈕後, 虛線框裡的表單資料都會一併傳送出去 而不在同一個虛線框裡的表單資料則不受影響 7
Dreamweaver 提供的表單元件 8
Dreamweaver 提供的表單元件 例如網頁中若有兩份獨立的問卷調查表, 最好把它們分別放在兩個不同的表單範圍 ( 虛線框 ) 裡, 以免互相影響 在表單範圍外加入表單元件時,Dreamweaver 會主動詢問是否新增表單標籤 9
Dreamweaver 提供的表單元件 隱藏欄位 可插入隱藏式的表單欄位, 通常是用來儲存給程式使用所必須的參數 但瀏覽者不需看到這些內容, 所以可用隱藏欄位來加以隱藏 10
Dreamweaver 提供的表單元件 11
Dreamweaver 提供的表單元件 跳頁選單 : 清單 / 選單的一種, 只不過 Dreamweaver 利用 Script 語法, 讓它可以連結到所指定的各個網頁 影像欄位 : 可插入影像以代替送出鈕, 當瀏覽者點選該影像之後, 同時會將滑鼠在影像上的座標值傳送出去, 有點類似影像地圖的功用 不過實際在製作網頁時, 此功能較少使用 檔案欄位 : 可讓瀏覽者指定自己電腦中的檔案, 通常用來指定上傳的檔案 但上傳的動作仍須另外撰寫程式才能使用 12
Dreamweaver 提供的表單元件 按鈕 : 按鈕最常見的就是送出鈕與重設鈕, 可傳送或清除表單內的資料 標籤標記 : 可用來替表單中的項目加註說明文字 不過通常不需自行按下此鈕來加入 <label> 標籤, 當在建立表單元件時, 即會自動開啟輸入標籤輔助功能屬性交談窗, 來協助做設定 欄位集 : 可先將表單中數個類似或相關的項目選取起來, 然後按此鈕來加上欄位集外框 13
Dreamweaver 提供的表單元件 以本書福拉格日本旅遊網站精選行程中的線上報名表網頁 (signup.html) 為例 就含有多種表單元件 本文介紹幾種常用表單元件的屬性設定, 可以將線上報名表網頁開啟以便對照學習 14
加入 文字欄位 在網頁中加入 文字欄位 請開啟一份新網頁, 然後切換到插入列的表單頁次, 練習如何在網頁中加入文字欄位 1. 在網頁中加入的表單元件可能不只一個, 為了讓表單元件能夠整齊排列, 可以利用表格來歸納 請按下表單鈕, 插入表單虛線範圍, 接著將插入點移到虛線範圍中, 再插入表格 15
在網頁中加入 文字欄位 16
在網頁中加入 文字欄位 2. 請將插入點移到第一個儲存格中, 然後按下表單頁次下的文字欄位鈕 17
在網頁中加入 文字欄位 3. 接著進行標籤標記的屬性設定 18
在網頁中加入 文字欄位 4. 可在網頁中看到加入的文字欄位 19
在網頁中加入 文字欄位 5. 請按 F12 鍵, 開啟瀏覽器來預覽 20
在網頁中加入 文字欄位 6. 重複以上步驟, 再新增以下幾個文字欄位 21
設定欄位的名稱 在網頁中插入表單元件時, 會跳出一個輸入標籤輔助功能屬性交談窗, 其中的 ID 欄就是用來指定表單元件的名稱 如果沒有在 ID 欄中輸入名稱, 那麼 Dreamweaver 會自動幫欄位取名稱 例如文字欄位的名稱就是 textfield textfield2... 依此類推 22
設定欄位的名稱 23
設定欄位的名稱 為了讓 CSS JavaScript ASP PHP 等能正確取得各欄位的資料, 最好替每個表單欄位指定名稱 通常會依據該欄位的性質來輸入名稱 例如輸入地址的欄位可以指定 address 做為名稱 輸入電話的欄位可以指定 tel 做為名稱 雖然對程式的處理結果沒有影響, 但是當在查看瀏覽者送出來的資料時會比較容易辨別 24
設定欄位的名稱 在點選該欄位後, 於屬性面板中修改 在此以文字欄位為例 其它表單元件的名稱也是同樣的修改方法 25
設定欄位的名稱 26
設定欄位的名稱 了解欄位名稱的用途 假設讓瀏覽者傳出純文字資料, 比較一下使用預設的欄位名稱跟指定欄位名稱的差異 27
標籤標記 的用法 在輸入標籤輔助功能屬性交談窗中, 可以讓在表單元件的前 ( 後 ) 加上說明文字 此項功能會以 HTML 的 <label> </label> 標籤來定義 其中的樣式選項, 則是可讓選擇 <label> 標籤的寫法 28
標籤標記 的用法 29
標籤標記 的用法 <label> 標籤最常應用在選項按鈕及核取方塊, 其好處是可以方便瀏覽者點選 如加入了一組選項按鈕, 如果沒有加上 <label> 標籤, 當瀏覽者要點選某個選項時, 只能按一下選項按鈕來選取 如果加入 <label> 的話, 那麼在說明文字上按一下, 也可以選取選項按鈕 30
單行式文字欄位 單行式文字欄位還可將文字欄切換為多行或密碼欄位 只要點選文字欄位, 在屬性面板中進行切換 31
單行式文字欄位 單行式欄位最多只能輸入一行文字, 可用屬性面板來控制欄位的寬度, 以及限制瀏覽者最多只能輸入幾個字, 以免表單被人填到 爆 掉 此外, 也可事先設定初始文字, 也就是讓欄位一開始就出現文字, 通常是用來做為輸入資料的範例 32
單行式文字欄位 開啟練習檔 Ex21-02.html 進行練習 選取聯絡電話文字欄位, 並開啟屬性面板進行設定 33
單行式文字欄位 接著按下 F12 鍵開啟瀏覽器來預覽 34
多行文字欄位 多行欄位可以容納好幾行文字, 通常用來讓瀏覽者留言或是輸入意見 ; 多行欄位除了同樣可調整寬度之外, 還可設定高度, 也就是一次可顯示幾行文字, 超過的行數必須用捲軸來瀏覽 拉下屬性面板的換行列示窗還可設定換行方式, 預設會自動隨著欄位寬度換行, 若不想使文字內容自動換行可設成關閉 請開啟練習檔 Ex21-03.html 建立了一個 建議事項 的文字欄位 請選取文字欄位 35
多行文字欄位 36
多行文字欄位 37
密碼文字欄位 如果某些文字欄位的資料需要保密, 可將該欄位設成密碼形式, 此時所輸入的文字都會以 符號表示, 以防止旁邊有人偷看 當這筆資料送到遠端伺服器後, 仍會顯示成真正的文字內容 38
密碼文字欄位 39
加入 核取方塊 與 選項按鈕群組 加入 核取方塊 製作複選題 核取方塊也就是多選鈕 其用途在於 : 當您設定了一組複選題, 其中的項目都是可以同時被選取的 例如要詢問瀏覽者下次想去的旅遊地點, 一個人可能會選擇兩個以上的地點, 所以就適合用核取方塊來讓瀏覽者複選 40
加入 核取方塊 製作複選題 要加入核取方塊, 只要將指標移到要插入的位置 然後按下表單頁次上的核取方塊鈕即可 接著同樣會出現輸入標籤輔助功能屬性交談窗 讓進行標籤標記的設定, 可以參考之前建立文字欄位時的說明 41
加入 核取方塊 製作複選題 開啟練習檔 Ex21-04.html 有事先加入好的核取方塊, 點選核取方塊可進行相關的屬性設定 42
加入 選項按鈕群組 製作單選題 如果表單中有一堆選項, 而瀏覽者只能從中選擇其一的時候, 就要加入選項按鈕來讓瀏覽者做選擇 1. 請繼續沿用 Ex21-04.html, 將插入點移到房型欄, 然後按下表單頁次的鈕, 隨即會出現選項按鈕群組交談窗 請依照下圖的操作, 要建立不同房型的選項按鈕 43
加入 選項按鈕群組 製作單選題 44
加入 選項按鈕群組 製作單選題 2. 接著, 請依照下圖的內容, 繼續輸入其他選項內容, 然後按下確定鈕 45
加入 選項按鈕群組 製作單選題 46
加入 選項按鈕群組 製作單選題 選項按鈕群組預設會以直式排列, 若需要將選項做橫式排列, 只要移到每個項目最後, 按下 Delete 鍵, 將斷行符號刪掉, 即可排在同一行 47
加入 選項按鈕群組 製作單選題 學會建立選項按鈕群組後, 再來練習建立一組人數的選項按鈕群組, 請參照下圖來建立 48
選項按鈕群組 的名稱設定 以選項按鈕群組建立的選單項目會有相同的名稱, 若使用選項按鈕來建立, 記得要將每一個選項按鈕的名稱設成一樣, 這樣瀏覽者才能只選擇其中一個項目 以選擇性別為例, 若瀏覽者原本選擇 " 男 ", 後來又選擇 " 女 ", 那麼 " 男 " 項目應該要自動取消選取才對 ; 但如果兩個單選項目的欄位名稱不一樣, 那麼 " 男 " " 女 " 兩個選項將可以同時被選擇, 就違背了 " 單選 " 的意義 49
選項按鈕群組 的名稱設定 Dreamwe aver 預設會將選項按鈕群組的欄位名稱依序以 RadioGr oup1 RadioGroup2 排列下去 ( 當然也可以自己更名 ); 若是不同的群組, 卻設成相同的名稱, 不論項目相隔多遠, 只要是在同一份表單中 ( 即在同一個表單虛線框裡 ), 仍然只有其中一個項目可以被選取 50
選項按鈕群組 的名稱設定 51
核取值設定 看到 " 性別 " 選項按鈕後面, 分別加上了 " 男 " " 女 " 等文字 不過這是給瀏覽者看的, 而表單真正傳送出去的資料, 則是該選項的核取的值屬性所定義的內容 所以必須把核取的值屬性改成相關文字, 這樣網站管理者收到瀏覽者送來的表單時, 才不會有一堆看不懂的訊息 52
核取值設定 53
核取值設定 54
加入 清單 / 選單 線上報名表網頁 signup.html 希望報名的人能夠填上學歷, 不過要供瀏覽者選擇的項目較多 為了節省網頁空間, 所以可以使用清單 / 選單這個表單元件 這樣只需要一行文字空間, 就可容納所有的學歷項目 55
加入 清單 / 選單 加入 清單 / 選單 元件 設定選單中的選項 值 欄位要輸入什麼? 將選單改成條列式清單 56
加入 清單 / 選單 元件 請開啟練習檔 Ex21-05.html 來練習 將插入點移到性別欄之後, 按下表單頁次的清單 / 選單鈕 57
加入 清單 / 選單 元件 58
設定選單中的選項 目前清單 / 選單沒有任何內容, 所以接著要加入一些可供瀏覽者選擇的學歷項目進去, 選單的寬度會隨著所加入的內容而自動調整 1. 要設定清單 / 選單中的內容, 請在選取清單 / 選單後, 按下屬性面板的清單值鈕 59
設定選單中的選項 2. 出現清單值交談窗後, 請在項目標籤欄中, 加入想放在選單中的項目, 完畢後按下確定鈕 60
設定選單中的選項 3. 如果想讓清單 / 選單一開始就固定在某個特定的項目, 則可在屬性面板中設定 61
設定選單中的選項 4. 最後按下 F12 鍵使用瀏覽器來預覽此網頁, 看看清單 / 選單是否能正常運作 62
值 欄位要輸入什麼? 清單值交談窗分為項目標籤與值兩個欄位, 照理來說, 項目標籤欄的內容是給瀏覽者觀看的, 真正傳送到伺服器的資料則是值欄位裡的內容, 所以應該還要在值欄裡輸入同樣的文字才對 不過實際上, 沒有在值欄中輸入任何資料, 表單在傳送時將會自動送出項目標籤的內容, 因此通常值欄位可以不用輸入資料 63
值 欄位要輸入什麼? 64
將選單改成條列式清單 也可以將選單中的項目一次都列出來, 讓瀏覽者不必拉下選單也可以看到所有內容, 這種類型的元件就稱為清單 (List) 雖然這樣比較佔空間, 但有個好處是可以複選 至於要使用選單或是清單, 就看的版面如何設計 65
將選單改成條列式清單 請選取清單 / 選單元件 然後在屬性面板中如下設定 66
將選單改成條列式清單 請練習在出生日期欄中建立選單供瀏覽者點選 67
加入表單按鈕 - 送出 和 重設 按鈕 在加入了林林總總的表單元件之後, 線上報名表最後必須放置一個 送出資料 的按鈕 瀏覽者如何傳送表單 送出資料 鈕 放一個可清除資料的 重設 鈕 當瀏覽者想重新填寫表單內容時, 可按下此鈕清除所有寫好的內容 這兩種按鈕都內建在 Dreamweaver 中 68
加入表單按鈕 - 送出 和 重設 按鈕 練習在網頁中加入 送出 及 重設 按鈕 1. 請開啟練習檔 Ex21-06.html 將插入點移到表格的最後 ( 注意 : 要在紅色的表單範圍內 ) 然後按下表單頁次的鈕 69
加入表單按鈕 - 送出 和 重設 按鈕 70
加入表單按鈕 - 送出 和 重設 按鈕 2. 接著會開啟插入標籤輔助功能屬性交談窗, 請按下取消鈕, 不加入標籤標記, 隨即可在網頁中看到插入的按鈕 71
加入表單按鈕 - 送出 和 重設 按鈕 3. 接著請在送出資料鈕旁邊, 再加上一個按鈕, 讓瀏覽者可以按下這個按鈕來清除表單中的資料 請在選取按鈕後, 由屬性面板中做設定 72
以 E-mail 傳送表單內容 編輯至此整個表單內容算是很完整 可是當瀏覽者按下 送出資料 鈕後, 表單資料會送到哪裡去呢? 這就要看的設定了 通常會連結到遠端的應用程式伺服器, 讓表單傳送給程式處理, 並將表單資料存至資料庫中 如果想用陽春一點的方式, 也可以讓表單資料透過 E-mail 傳送給, 請跟著以下的步驟進行 73
以 E-mail 傳送表單內容 1. 請開啟練習檔 Ex21-07.html 然後點選表單範圍的紅色虛線框 屬性面板會切換到整份表單的屬性設定模式 請在動作欄裡輸入 E-mail 連結, 表示將 送出表單 的動作交由 E-mail 來處理, 語法是 74
以 E-mail 傳送表單內容 75
以 E-mail 傳送表單內容 2. 若想讓每封傳送過來的 E-mail 都具有相同的主旨, 可以直接在 E-mail 連結後面加上主旨內容 語法是 :?subject= 主旨內容 76
以 E-mail 傳送表單內容 3. 將屬性面板的方法改為 POST 77
以 E-mail 傳送表單內容 4. 最後在編碼類型欄位中自行輸入 :text/plain 將傳送出去的表單資料類型設為純文字 不然收信者可能會看到一堆亂碼 78
以 E-mail 傳送表單內容 設定完畢請開啟瀏覽器來測試一下 ( 別忘了先連上 Internet) 在填完了一堆欄位後, 按下送出資料鈕, 將以 E-mail 傳送資料 79
以 E-mail 傳送表單內容 80
以 E-mail 傳送表單內容 81
以 E-mail 傳送表單內容 請開啟郵件軟體 ( 如 Windows Mail) 收到這封信所看到的內容如下 這就表示資料已經傳送成功 82
以 E-mail 傳送表單內容 83
以 E-mail 傳送表單內容 儲存好附加檔案後, 請開啟記事本, 然後執行 檔案 / 開啟舊檔 命令, 開啟剛才儲存的附加檔案 84
以 E-mail 傳送表單內容 85
以 E-mail 傳送表單內容 使用電子郵件的做法來傳送表單資料, 並不是理想的做法, 因為各家瀏覽器的支援程度差異很大 最好還是搭配後端的程式及資料庫來處裡, 這裏只是讓您了解表單的用法 86
檢驗表單欄位的正確性 通常是在 ASP PHP 程式中事先檢查各表單欄位的正確性 如果瀏覽者傳送到伺服器的資料不符規定 ( 例如有些必要的欄位沒有填 或是 E-mail 格式不正確 ), 那麼就不會處理這筆資料, 而會告訴瀏覽者哪裡有問題, 等修正並重新傳送後才會接受 在填寫表單時, 避免漏掉某個欄位 或者填錯內容 沒有撰寫任何程式, 無法為每一個欄位設定很周密的檢驗條件 Dreamweaver 可以利用 Spry 的驗證功能, 讓瀏覽器來幫檢查各欄位的正確性 87
檢驗表單欄位的正確性 現在將說明 Spry 的驗證功能, 檢查瀏覽者輸入的資料是否正確 Spry 的驗證功能可針對文字欄位 文字區域 核取方塊以及清單做驗證 88
檢驗表單欄位的正確性 文字欄位的驗證 驗證資料的時機 文字區域的驗證 核取方塊的驗證 清單的驗證 89
文字欄位的驗證 文字欄位是最常使用的表單元件 舉凡姓名 電子郵件帳號 身份證字號 信用卡資料 郵遞區號 等, 都會用到文字欄位 為了避免瀏覽者輸入錯誤資料, 可以在建立表單元件時, 就加入 Spry 驗證文字欄位 透過屬性面板的設定, 就可立即完成驗證欄位的工作 90
文字欄位的驗證 91
文字欄位的驗證 1. 請開啟一份新網頁, 然後切換到插入工具列的表單頁次, 按下 Spry 驗證文字欄位鈕, 來練習建立一個電子郵件的驗證欄位 2. 接著會出現提示訊息, 要求先儲存網頁, 將網頁存檔後, 會開啟插入標籤輔助功能屬性交談窗, 如下設定 92
文字欄位的驗證 93
文字欄位的驗證 94
文字欄位的驗證 3. 其實插入 Spry 驗證文字欄位和一般建立文字欄位的操作是一樣的, 差別在於 Spry 驗證文字欄位會多了一些驗證的屬性 當將指標移到 Spry 驗證文字欄位附近時, 按一下亮藍色的標籤即可在屬性面板中看到驗證欄位的各項設定 95
文字欄位的驗證 96
文字欄位的驗證 4. 請拉下屬性面板的類型欄, 選擇電子郵件地址, 在預覽狀態欄中選擇格式無效, 並勾選驗證於的 onblur 項目 97
文字欄位的驗證 5. 設定好之後, 請開啟瀏覽器來預覽 98
文字欄位的驗證 少了 @ 符號, 所以出現錯誤訊息 99
文字欄位的驗證 6. 將錯誤的電子郵件帳號更正後, 文字欄位的底色就會變綠色, 而格式無效的訊息也會消失 100
文字欄位的驗證 文字欄位可驗證的類型很多, 以下再舉二個例子 範例一 : 在建立網路商店 線上購物之類的網站, 信用卡欄位的驗證相當重要, 因為牽涉到金錢交易, 為了避免瀏覽者輸入無效的資料, 可以透過底下的操作, 先做好第一關的把關, 後續與銀行的連線 驗證信用卡等就交由其他程式處理 101
文字欄位的驗證 102
文字欄位的驗證 103
文字欄位的驗證 範例二 : 在表單中建立日期欄位也是非常普遍的應用, 但如果沒有特別標註的話, 瀏覽者可能不知道該填入 年 / 月 / 日 月 / 日 / 年 或是 日 / 月 / 年 等格式 ; 而且如果日期欄位不是以清單的方式讓瀏覽者點選, 很可能還會填入錯誤的資料, 例如月份只有 12 個月, 但可能有人會誤填超過 12 的數值 所以可以建立一個日期驗證欄位, 幫助瀏覽者填入資料 104
文字欄位的驗證 105
文字欄位的驗證 106
文字欄位的驗證 107
驗證資料的時機 要驗證瀏覽者輸入的資料是否符合格式有 3 個時間點可設定, 可以在屬性面板中的驗證於做選擇 108
驗證資料的時機 onblur: 當瀏覽者在文字欄位外按一下, 就會進行驗證 onchange: 當瀏覽者變更文字欄位中的內容時, 就會進行驗證 onsubmit: 當瀏覽者按下送出鈕將表單送出時, 就會進行驗證 在實務應用上, 使用 onblur 及 onsubmit 的做法比較多 109
文字區域的驗證 文字區域通常用來讓瀏覽者輸入內容較多的資料, 像是留言內容 意見發表 等 為了避免輸入大量不相干的資料佔版面, 可以設定文字區域的字數限制 1. 請開啟一份新網頁, 按下表單頁次下的 Spry 驗證文字區域鈕 110
文字區域的驗證 2. 請依照畫面指示儲存網頁, 並建立好一個留言內容的文字區域 111
文字區域的驗證 3. 接著選取 Spry 標籤, 在屬性面板進行以下的設定 要限制文字區域最少得輸入 8 個字元, 最多不能超過 200 個字元 112
文字區域的驗證 113
文字區域的驗證 4. 請開啟瀏覽器來預覽 114
文字區域的驗證 115
核取方塊的驗證 核取方塊的驗證, 最常見的應用就是在加入會員時, 有些網站會提出使用同意聲明, 在看過這些聲明後, 要按下我同意或是我認同的核取按鈕, 才能繼續進行下個步驟, 當網站有需要此類的設計時, 就可以使用核取方塊的驗證 1. 要做核取方塊的驗證, 請開啟一份新網頁, 然後按下表單頁次下的 Spry 驗證核取方塊鈕 116
核取方塊的驗證 2. 依指示儲存網頁後, 並進行表單元件的標籤設定, 即可建立一個 Spry 驗證核取方塊 117
核取方塊的驗證 3. 選取此核取方塊, 在屬性面板進行設定 118
核取方塊的驗證 4. 最後開啟瀏覽器來測試一下此核取方塊 119
清單的驗證 在建立清單 / 選單時, 想讓清單一開始呈空白狀態, 可以在第一個清單項目中輸入一個全形空白 若不希望瀏覽者送出這個空白項目, 可以加上驗證, 提醒瀏覽者要選擇一項清單項目 120
清單的驗證 121
清單的驗證 1. 做選取項目的驗證, 請開啟一份新網頁, 然後按下表單頁次下的 Spry 驗證選取鈕 122
清單的驗證 2. 依指示儲存網頁, 並進行表單元件的標籤設定, 即可建立一個清單 / 選單, 請依照之前所教的方法, 在屬性面板替清單 / 選單建立清單項目 123
清單的驗證 3. 接著選取 Spry 標籤, 即可在屬性面板進行驗證設定 124
清單的驗證 4. 最後, 請開啟瀏覽器來測試一下結果 125