建立互动式表单.PPTVIP

第 9 章 建立互動式 表單 本章提要 9-1 建立表單－form 9-2 表單的各種輸入欄位 9-3 列表欄的變化 9-4 區塊式文字輸入欄位－textarea 9-5 組織表單內容 前言 在瀏覽網頁時, 常可看到讓來訪者留下意見、資料的設計, 提供雙向互動的機會, 這些可輸入資料的欄位, 統稱為表單 (Form)。 要設計可輸入資料的網頁並不困難, 麻煩的是如何處理使用者所輸入的資料。以目前而言, 大多數的表單資料都是透過 ASP (Active Server Page)、PHP (PHP: Hypertext Preprocessor)、CGI (Common Gateway Interface) 程式來處理。 前言 不過也有比較單純的處理方式, 就是將資料以電子郵件的方式寄到自己的電子信箱中, 事後再用人工或程式來處理這些郵件 (資料)。 為避免混入太多的程式設計內容, 在這一章不會詳細介紹 ASP、PHP、或 CGI 程式的寫法, 仍以說明建立表單的 HTML 標籤為主。 9-1 建立表單－form 所有的表單內容都是放在 form .. /form 標籤之中, 包括表單中的說明文字、供使用者輸入的欄位等等。 在文件中可設定多個表單, 但是不能做巢狀的表單, 也就是不能在 form 標籤中加入第二個 form 標籤。以下先介紹如何設計表單中的欄位。 9-1-1 表單中的輸入欄位－input 在一般表單中所看到的輸入欄位, 幾乎都是用 input 標籤來設定的, 只要修改其中的屬性, 就會出現不同的輸入欄位。input 標籤的格式大致如下所示： 其中 type 屬性就是用來設定要使用的輸入欄位種類, 例如一般的文字輸入欄 (text)、單選鈕 (radio)、多選鈕 (checkbox)、或是按下後就會送出表單資料的按鈕 (button) 等等。 9-1-1 表單中的輸入欄位－input value 屬性所設的初始值, 則是一開始就出現在該輸入欄位中的資料。 當表單資料送出時, 使用者在各欄位輸入的資料是以 『欄位名稱 = 資料值』 的方式送出, 所以為了方便程式能由其中萃取出合適的資訊 (或是供自己閱讀), 最好用 name 屬性為各欄位取一個比較有意義的名稱。接著會為您介紹各種資料輸入欄位的用法。 9-1-2 建立可輸入文字的欄位－input type=text 這是最常見的輸入欄位之一, 其設定為 type=text, 這樣就會出現一個可供輸入的方框, 例如： 9-1-2 建立可輸入文字的欄位－input type=text 如果想要調整方框的長度, 則可再加上 size 屬性。若要限制使用者輸入的資料長度, 則可用 maxlength 加以設限, 例如： size 屬性將方框設定成 20 個字元寬, 但 maxlength 則限制了使用者只能輸入 10 個字元, 輸入滿 10 個字後, 就不能再輸入其它的字了。 9-1-3 建立可輸入密碼的欄位－input type=password 將 type 設為 passward, 則可得到一個與 text 相似的輸入欄位, 不過在這個密碼欄中輸入的文字在螢幕上都會以 『*』 或 『●』 符號取代, 例如： 這是為了達到保密的效果, 所以才以 ● 取代使用者輸入的文字顯示在螢幕上。 9-1-4 建立送出資料的按鈕－input type=submit 理論上, 所有的表單中都會有一個送出資料的按鈕, 當使用者按下此鈕時, 瀏覽器就會將使用者在表單中所輸入的資料送出。 使用 type=submit 即可做出用來送出資料的按鈕, 由於不須從這個按鈕本身得到資料, 所以不用設定其 name 屬性 (當然您想要用的話仍可加上此屬性)。 9-1-4 建立送出資料的按鈕－input type=submit 至於此時在 value 屬性所設的文字, 會變成出現在按鈕上的文字, 例如： 按鈕的大小會依 value 中的文字多寡自動調整, 像上面的例子用了 4 個字, 所以按鈕就變得稍微大了些。 9-1-5 建立清除輸入資料的按鈕－input type=reset 有一個送出資料的按鈕, 相對的還有一個清除表單中已輸入資料的重設鈕 (Reset), 其目的是讓使用者在發現有輸入錯誤時, 只要按下此鈕,就能將目前表單中所有的資料都清除掉, 以便重新輸入。 9-1-5 建立清除輸入資料的按鈕－input type=reset 重設鈕的 type 屬性就是要設為 reset, 同樣的我們可在 value 中設定出現在按鈕中的文字： 9-1-6 應用實例 現在就將上述的標籤都組合在一起, 形成一個簡單的表單, 讓大家實際了解表單資料的運作方式。為此, 我