HTML Form 表單

HTML Form 表單應用可以說是互動網頁設計不可或缺的部分,如果只是單純的企業網站,也有可能會用到連絡表單,所以我們要花點時間研究 HTML Form 表單的元素,在未來設計網頁上會有很大的幫助。HTML form 表單是以一組 <form></form> 所組成,裡面可以包含各種文字輸入的欄位、選單以及表單按鈕(HTML button),簡單的表單結構如下。

HTML form 表單結構
<form action="送出目的地" method="資料傳送方式">
... 表單內容...
</form>

常見的 HTML form 表單元素

一、文字輸入欄位 <input type="text"> (請參考 HTML input text 文字輸入欄位

表單的輸入欄位 <input type="text">,這樣的 input 標籤會在頁面上顯示一個輸入框,用來給網友填入資料,例如會員登入的帳號密碼或是線上報名表單的姓名、電話、地址之類的資訊。

二、密碼輸入欄位 <input type="password"> (請參考 HTML Form input password 密碼欄位

密碼輸入欄位顧名思義就是讓網友輸入密碼所用,與 text 不同的是 password 會自動隱藏網友所輸入的內容,避免輸入密碼的同時被旁邊的其他人看到,但只能防君子,無法防小人,對於鍵盤側錄軟體似乎沒有作用。

三、文字輸入欄位 <textarea></textarea> (請參考 HTML textarea

文字輸入框 <textarea></textarea> 與 <input type="text"> 不同的是可以多行輸入,通常用來給網友填入比較多的資訊,例如網友想說的內容或是整段的文字,且當網友輸入的文字長度較長的時候,<textarea></textarea> 可以自動產生 scrollbar 讓網友自己拉動,scrollbar 可以透過 CSS 語法控制顯示狀態與顯示風格。

四、下拉選單 <select><option></option></select> (請參考 HTML select option 下拉式選單

<select></select> 呈現的是 HTML form 表單的下拉式選單,例如日期選擇或是購物的商品規格都是常見的應用,其中 <option> 是選項,可以設定多的下拉選單的選項,每個選項給不同的值,表單送出後讓程式取得網友的選擇項目。

五、選項按鈕 Radio Buttons <input type="radio"> (請參考 HTML Radio Buttons 選項按鈕

Radio Buttons <input type="radio"> 通常會做成一組的選項,讓網友僅能選擇其中一項,做成一組的技巧是設定整組 <input type="radio"> 的 name 都是一樣的,這樣 form 就會自動判斷為一整組。

六、核取方塊 Checkboxes <input type="checkbox"> (請參考 HTML form Checkboxes

核取方塊 Checkboxes 與選項按鈕 Radio Buttons 使用的地方不太一樣,Checkboxes 通常用來製作多選項的表單,例如網友在填寫個人興趣的時候,可以勾選許多項目,就是用 Checkboxes 做到的。

七、表單按鈕 HTML button (請參考 HTML button 按鈕

當有了以上各種表單元素之後,最重要的還是必須有表單按鈕,做為表單送出的重要任務,表單按鈕 button 除了可以做成表單送出的功能之外,也可以透過 JavaScript 製作出清除表單內容的功能唷!

八、隱藏欄位 input hidden (請參考 HTML Form input hidden

隱藏欄位用來傳遞一些表單參數,並不會顯示在網頁上。

HTML Form 表單範例
<form action="test.php" method="post">
 姓名:<input type="text" name="UserName"><br>
 內容:<textarea name="Content"></textarea><br>
 <input type="submit" value="送出表單">
</form>
以上範例呈現結果
姓名:
內容:
此範例中我們設定 action="test.php" 與 method="post" 的意思是當網友按下送出表單的按鈕之後,Form 會透過 post 的傳遞方式,將表單資料送到 text.php 這支程式,而表單內容我們放了姓名與內容兩個欄位,分別使用 <input type="text"> 與 <textarea> 讓網友填寫。

HTML Form 表單資料傳遞

當你完成了 HTML Form 表單的設計之後,最重要的當然是將表單資料送出後的資料處理,通常我們會使用 PHP 這類的程式語言來處理,並存入資料庫,如 MySQL 資料庫。HTML Form 表單資料傳遞有兩種方式,分別為 POST 與 GET,兩種方式的差異主要在於網址的參數,如果使用 POST 則網址不會有參數,但使用 GET 就會在網址出現表單參數,請參考以下兩種傳遞方式的範例

一、透過 POST 傳遞資料

<form action="接收資料的 PHP 程式" method="post"></form>


二、透過 GET 傳遞資料

<form action="接收資料的 PHP 程式" method="get"></form>


這裡的重點之一在於無論是使用 POST 還是 GET 方式,寫在表單中的 mothod 時,都必須寫成小寫英文字母,如果寫成大寫可是會出問題的唷!最常見的問題就是 PHP 無法讀取到資料,這點要稍微注意一下。

HTML Form 表單結合 PHP 請參閱:PHP form 讀取表單資料傳遞

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C