Transcript 文字欄位
互動表單的應用 認識表單元件 • 表單 (Form) 是網站管理者與瀏覽者互動的 一種媒介, 它的應用範圍很廣, 例如製作留 言板、討論區、搜尋引擎、會員申請表、 線上刷卡購物、問卷調查表...等, 其目的不 外乎就是先收集瀏覽者所輸入的資料, 然後 再做後續的應用。 認識表單元件 表單與 CGI、ASP • 我們在網頁上所看到的表單欄位, 其實只是 一種輸入介面, 僅供瀏覽者打字或選擇項目 而已, 當你按下這份表單的「送出」 鈕之後, 表單內容就會傳送到伺服器上, 並且由事先 撰寫好的 CGI 或 ASP 程式來接手處理, 最 後伺服器再將處理結果傳回瀏覽者的電腦 裡, 就變成了我們送出表單後所看到的畫面。 表單與 CGI、ASP • 由此可知, 表單必須依賴 CGI 或 ASP 程 式, 才能真正發揮其功用, 否則只是一個 空殼而已。 表單元件的另一種用途 • 表單元件也可以利用 Script 語法加以控制, 使其不必透過程式及伺服器即可產生特殊 的效果；例如 18-6 節範例中, 可選擇連結頁 面的下拉式表單, 就是用 JavaScript 來達成 的。 • 如果你不會撰寫 Script, 只要借助行為 (Behavior) 的幫忙, 仍可做出許多不錯的效 果。 Dreamweaver 提供的表單元件 • Dreamweaver 提供了完整的表單元件, 雖然 你可能不會撰寫 CGI 或 ASP 程式, 但仍可 以利用 Dreamweaver 迅速做出表單外觀, 至 於程式部份, 則可交由程式設計師來為你的 表單量身訂作；或選擇最簡單的方法, 將表 單內容透過 E-mail 傳送到你的信箱, 這種做 法就完全不需要任程式語言了。 Dreamweaver 提供的表單元件 • 請開啟表單面板, 就會看到 Dreamweaver 所提供的各種表單元件： Dreamweaver 提供的表單元件 • 表單：按下此鈕後, 網頁上會出現一個紅 色虛線框, 即表示表單範圍, 在框框裡面 的表單元件都屬於同一組表單, 當你按下 「送出」鈕後, 虛線框裡的表單資料都會 被傳送出去。 • 文字欄位：可供瀏覽者輸入文字、留言, 亦可將輸入的文字以 ● 號顯示, 以做為 密碼欄位。 Dreamweaver 提供的表單元件 • 隱藏欄位：可插入隱藏式的表單欄位, 通 常是用來儲存給 CGI 或 ASP 程式所必須 的參數, 但瀏覽者不須看到這些內容, 所 以可加以隱藏。 • 文字區域：插入文字區域可直接讓瀏覽 者輸入多行文字, 例如意見欄、自我介紹 等。 • 核取方塊：插入多選鈕, 可供瀏覽者自由 複選。 Dreamweaver 提供的表單元件 • 選項按鈕：插入單選鈕, 同一組單選鈕中 只有一個可以被選取, 所以通常作為問卷 中的單選題 (例如詢問瀏覽者的性別)。 • 選項按鈕群組：可直接設定問卷中同一 個問題的數個選項, 但是瀏覽者只能選擇 其中一個項目。此功能其實和選項按鈕 完全相同, 只是一次可插入多個選項鈕, 並可用同一個交談窗來設定內容。 Dreamweaver 提供的表單元件 • 清單/選單：可將選項集中到清單/選單中, 然後讓瀏覽者選擇其中的項目。 • 跳頁選單：其實這就是清單/選單的一種, 只不過 Dreamweaver 利用 Script 語法, 讓 它可以連結到你所指定的各個網頁。 • 影像欄位：可插入影像以代替 "送出" 鈕, 當瀏覽者點選該影像之後, 同時會將滑鼠 在影像上的座標值傳送出去, 有點類似影 像地圖的功用。 Dreamweaver 提供的表單元件 • 檔案欄位：可讓瀏覽者選擇自己電腦中 的某個檔案, 然後上傳到遠端伺服器裡, 不過上傳的動作必須另外撰寫程式才能 使用。 • 按鈕：最常見的是 "送出" 鈕與 "重設" 鈕, 可傳送或清除表單內的資料；而利用 Script 語法, 也可以另外賦予按鈕特殊的 功能, 例如按下按鈕就連結到其他網頁。 Dreamweaver 提供的表單元件 • 標籤標記：可用來替表單中的項目加註 說明文字。此功能會以 "<label>" HTML 標籤將加註的文字與加註的項目括在一 起, 而成為一個單元。 • 欄位集：您可先將表單中數個類似或相 關的項目選取起來, 然後按此鈕來加上欄 位集外框。不過請注意, 欄位集的框線要 在瀏覽器中才看得到。 Dreamweaver 提供的表單元件 加入文字欄位 • 請開啟一個新網頁, 然後切換到表單面板, 按面板上的文字欄位鈕, 即可在插入點處加 入一行文字欄位；如果網頁上沒有任何表 單虛線範圍, Dreamweaver 會詢問是否要自 動建立一個表單範圍： 加入文字欄位 加入文字欄位 • 為使瀏覽者知道欄位該輸入什麼資料, 我 們必須在各欄位前面打字, 以註明每個欄 位的用途： 如何刪除表單虛線範圍？ • 若要刪除表單範圍, 只要用滑鼠點選紅色框 框的「框線」, 就表示選取了整個表單範圍, 而狀態列左下角的 <form> 標籤也會變成選 取狀態, 此時只要按下 [Delete] 鍵, 即可刪除 整個紅色虛線框了。 如何刪除表單虛線範圍？ 設定文字欄位的形式 • 我們還可將文字欄切換為多行或密碼欄位； 請點選一個文字欄位, 便可在屬性面板中進 行切換： 單行式文字欄位 • 單行式欄位只能輸入一行文字, 請用屬性 面板來控制欄位的寬度及字數限制。也 可事先設定初始文字, 通常用來做為輸入 資料的範例。 單行式文字欄位 多行文字欄位 • 多行欄位可以容納好幾行文字, 通常用來讓 瀏覽者留言或是輸入意見；多行欄位還可 設定高度, 也就是一次可顯示幾行文字, 超 過的行數必須用捲動軸來瀏覽。 • 拉下換行列示窗可設定換行方式, 預設會自 動隨著欄位寬度換行, 若不想使文字內容自 動換行, 可將之設成關閉。 多行文字欄位 多行文字欄位 密碼文字欄位 • 如果某些文字欄位的資料需要保密, 可將 該欄位設成密碼形式, 此時所輸入的文字 都會以 ● 符號表示, 以防止旁邊有人偷 看；當然囉, 當這筆資料送到遠端伺服器 後, 仍會顯示成真正的文字內容。 密碼文字欄位 設定欄位的名稱 • 為了讓 CGI 或 ASP 程式能正確取得各欄位 的資料, 我們必須為每一個表單欄位設定名 稱, 而且在同一組表單範圍中, 欄位名稱不 可重複 (單選鈕可以例外)。 • 插入文字欄位或其它表單元件時, Dreamweaver 會自動幫各欄位命名, 例如文 字欄位是 textfield、 textfield2...依序排列。 設定欄位的名稱 • 為了方便記憶, 一般會依該欄位的性質來取 個相關的名稱, 例如輸入地址的欄位會取做 "address"、輸入電話的欄位會取做 "tel", 雖 然對程式的處理結果沒有影響, 但我們在查 看瀏覽者送出來的資料時會比較方便。 • 要更改欄位名稱, 可在點選該欄位後, 於屬 性面板中修改 。 設定欄位的名稱 設定欄位的名稱 加入核取方塊 • 核取方塊也就是多選鈕, 其用途在於：當您 設定了一組複選題, 其中的項目都是可以同 時被選取的；例如我們要詢問瀏覽者使用 的相機品牌, 由於一個人可能使用兩種以上 的廠牌, 所以就用核取方塊來讓瀏覽者複選。 加入核取方塊 • 請開啟練習檔ex16-01.htm, 點選事先加入 的核取方塊, 進行相關的屬性設定： 加入選項按鈕 • 如果表單中有一堆選項, 而瀏覽者只能從 中選擇其一的時候 (如詢問性別), 就可加 入單選鈕來讓瀏覽者做選擇。 加入選項按鈕群組 • 通常單選的題目都不會只有一個選項, 我們 可按多次單選鈕, 再將每個選項內容標示清 楚, 或者是按下選項按鈕群組鈕, 一次設定 好群組內的選項。 • 例如練習檔 ex16-01.htm 中的參賽類別及檔 案格式就是選項按鈕群組的應用： 加入選項按鈕群組 加入選項按鈕群組 加入選項按鈕群組 • 無論是設定選項按鈕或選項按鈕群組, 同 一組單選項目的欄位名稱一定要相同, 這 樣瀏覽者才能只選擇其中一個項目。 • 以選擇性別為例, 若瀏覽者原本選擇 "男", 後來又選擇 "女", 那麼 "男" 項目應該要 自動取消選取才對；但如果兩個單選項 目的欄位名稱不一樣, 那麼 "男"、"女" 兩 個選項將可以同時被選擇。 加入選項按鈕群組 加入選項按鈕群組 不同選項群組的名稱必須不一樣 • Dreamweaver 預設會將所有的選項按鈕的名 稱都設成一樣, 但若是使用選項按鈕群組來 設定, 欄位名稱就會依序以 "RadioGroup1"、 "RadioGroup2"…排列下去；若是不同的群 組, 卻設成相同的名稱, 不論項目相隔多遠, 只要是在同一份表單中 (即在同一個表單虛 線框裡), 仍然只有其中一個項目可以被選取。 不同選項群組的名稱必須不一樣 核取的值屬性設定 • 我們看到 "性別" 選項後面, 分別加上了 "男"、"女" 等文字, 不過這是給瀏覽者看的, 而真正傳送出去的資料, 則是該選項的核取 的值屬性所定義的內容, 所以我們必須把核 取的值屬性改成相關的文字。 核取的值屬性設定 核取的值屬性設定 加入清單/選單 在報名表網頁中, 我們要詢問瀏覽者的職 業, 由於所列出的職業項目很多, 為了節 省網頁空間, 所以我們決定採用清單/選單, 這樣只需一行文字的空間, 就可容納所有 的職業項目。 • 加入清單/選單 • 設定選單中的選項 • 將選單改成條列式清單 加入清單/選單 • 請開啟練習檔 ex16-02.htm, 將插入點移到 職業：文字之後, 然後按下表單面板的清單 /選單鈕： 設定選單中的選項 1. 選取清單/選單元件後, 按下屬性面板的 清 單值鈕。 2. 接著會出現清單值交談窗, 請在項目標籤 欄位加入想放在選單中的項目, 完畢後按 下確定鈕離開。 設定選單中的選項 數值欄要輸入什麼東西？ • 清單值交談窗分為項目標籤與值兩個欄位, 照理說, 項目標籤欄的內容是給瀏覽者觀看 的, 真正傳送到伺服器的資料則是值欄位裡 的內容, 所以我們應該還要在值欄裡輸入同 樣的文字才對。 • 實際上, 若沒有在值欄輸入任何內容, 傳送 時將自動送出項目標籤的內容, 因此大多數 情況下, 值欄位不需輸入文字。 數值欄要輸入什麼東西？ 設定選單中的選項 3. 如果想讓選單一開始就固定在某個特定 的項目, 則可在屬性面板中設定： 設定選單中的選項 4. 用瀏覽器來預 覽此網頁, 看 看下拉式選單 是否能正常運 作： 將選單改成條列式清單 • 你也可以將選單中的項目一次都列出來, 讓 瀏覽者不必拉下選單也可以看到所有內容, 這種類型的元件就稱為清單 (List)；雖然這 樣比較佔空間, 但有個好處是可以複選！ 將選單改成條列式清單 加入表單按鈕 • 表單最後必須放置一個「送出資料」的按 鈕, 讓瀏覽者把表單傳送給過來。 • 通常還會再放一個可清除資料的「重設 鈕」, 當瀏覽者想重新填寫表單內容時, 可 按下此鈕清除所有寫好的內容。 加入送出鈕和重設鈕 • 請按下表單面板的按鈕鈕, 即可在插入點處 加入一個按鈕, 預設的按鈕形式是 「送出鈕」 (Submit)。 • 可另外再加入一個按鈕, 即「重設鈕」 (Reset), 然後切換屬性面板中的動作種類： 加入送出鈕和重設鈕 加入送出鈕和重設鈕 • 如果要更改按鈕上面的文字, 請在屬性面板 的標籤欄位裡設定： 用 Script 語法來定義按鈕用途 • 按鈕的作用除了「送出」與「重設」兩種, 你還可以用 Script 來自訂按鈕的用途, 如果 不會 Script 語法也沒關係, 因為行為 (Behavior) 所內建的各種效果已足夠你使用 了。 • 以下我們做個簡單的例子, 讓瀏覽者按一下 按鈕, 就可連結到另外一個網頁： 用 Script 語法來定義按鈕用途 用 Script 語法來定義按鈕用途 1. 請開啟練習檔 ex16-03.htm, 在網頁上插入 一個按鈕, 由於我們不是要製作整份表單, 所以照理可不必加入表單虛線範圍；不過 要注意的是, 若沒有產生表單範圍, 則按鈕 在 Netscape 上可能會沒有作用, 所以最好 還是加入表單範圍。 用 Script 語法來定義按鈕用途 用 Script 語法來定義按鈕用途 2. 點選按鈕, 在屬性面板中將動作設為無,； 你可以修改一下按鈕上的文字, 並將按 鈕設為置中對齊。 用 Script 語法來定義按鈕用途 3. 選取按鈕並開啟行為面板, 按下新增項 目鈕, 選擇『前往 URL』動作。 用 Script 語法來定義按鈕用途 4. 在交談窗的 URL 欄中指定連結網頁, 再按 下確定鈕就完成了；請用瀏覽器來測試看 看哦！ 用 E-Mail 傳送表單內容 • 通常當瀏覽者按下「送出鈕」後, 表單資料 會連結到遠端的應用程式伺服器, 傳送給程 式處理, 並將表單資料存至資料庫中；如果 想用陽春一點的方式, 也可以讓表單資料透 過 E-mail 傳送給你。 用 E-Mail 傳送表單內容 1. 請開啟練習檔 ex16-05.htm , 然後點選表單 範圍的紅色虛線框, 此時屬性面板會切換 到整份表單的屬性設定模式, 請在動作欄 裡輸入 E-mail 連結, 表示將「送出表單」 的動作交由 E-mail 來處理, 語法是： 用 E-Mail 傳送表單內容 用 E-Mail 傳送表單內容 2. 若想讓傳送過來的 E-mail 都具有相同的 主旨, 可以直接在 E-mail 連結後面加上主 旨內容, 語法是 ?subject=主旨內容： 用 E-Mail 傳送表單內容 3. 將屬性面板的方法改為 POST, 由於表單 預設的處理方法通常為 GET, 所能處理的 資料量比較少, 現在大部份都是用 POST 的處理方式。 用 E-Mail 傳送表單內容 4. 在編碼類型欄位中輸入 text/plain, 將傳送 出去的表單資料類型設為純文字, 否則當 你收到別人傳送過來的 E-mail 時, 可能會 看到一堆亂碼。 用 E-Mail 傳送表單內容 • 設定完畢之後, 請用瀏覽器來測試一下是否 可正常傳送 (別忘了先連上 Internet) ；例如 以 Internet Explorer 來測試報名表網頁, 在填 完了一堆欄位後, 按下送出報名表鈕, 就出 現如下的交談窗, 告訴你即將以 E-mail 傳送 資料： 用 E-Mail 傳送表單內容 用 E-Mail 傳送表單內容 • 當網站管 理者收到 郵件後, 會 看到如下 的內容： 檢驗表單欄位的正確性 • 一般在 CGI 或 ASP 程式中, 都會事先檢查 各表單欄位的正確性, 如果瀏覽者傳送到 伺服器的資料不符合規定, 就不會處理這 筆資料, 而會告知瀏覽者哪裡有問題, 等修 正並重新傳送後才會處理。 • 在本章的例子中, 並沒有用到 CGI 或 ASP 程式, 所以無法為每一個欄位設定很周密 的檢驗條件, 不過我們可以改用 Script 語 法, 讓瀏覽器來幫你檢查各欄位的正確性, 至少可做到最基本的篩選。 檢驗表單欄位的正確性 • 在行為面板裡就有一組事先寫好的 Script, 可以幫你檢驗表單欄位的資料；假設我們 要對 E-mail 欄位做限制, 使該欄位裡的資料 必須符合 E-mail 格式, 那麼可如下操作： 檢驗表單欄位的正確性 1. 請開啟 ex16-06.htm, 選取表單中的姓名 欄位, 在行為面板中按下新增項目鈕, 選 擇『檢驗表單』動作。 檢驗表單欄位的正確性 2. 交談窗中會出現目前表單裡所有的文字 欄位, 請選擇一個想要做檢驗的欄位, 再 指定其限制條件即可。 檢驗表單欄位的正確性 3. 請使用瀏覽器來測試表單的驗証功能。如 果我們沒有在姓名欄位裡輸入資料那麼當 插入點離開該欄位時, 就會跳出一個交談 窗, 告訴你資料格式有誤, 請重新修正吧！ 檢驗表單欄位的正確性 將交談窗訊息改成中文 • 由於驗証表單的 Script 碼是由 Dreamweaver 幫你撰寫的, 所以預設的錯誤訊息都以英文 顯示；如果你懂得一點 Script 語法, 也可以 切換到程式碼模式, 將相關的英文訊息都改 成中文字。 將交談窗訊息改成中文