HTML Form 表單設計 - 網頁設計教學站

HTML form 是表功能，日常生活中在上網時，常常都會看得到表單的應用，只是可以各網站的表單可能以不同的型式出現而已，例如會員註冊、會員登入、購物車、活動報名表 ... 等，幾乎都是 HTML Form 網頁表單應用，甚至在臉書分享貼文或回別人的文，都是使用網頁表單的例子，既然網頁表單如此有用，我們就來研究該如何設計出一個標準的 HTML Form 吧！

HTML Form 語法

<form action="資料傳送目的地" method="資料傳遞方式">
表單內容與表單元素
</form>

標準的 HTML 表單是由 <form> 標籤開始，結尾使用 </form> 標籤，兩個標籤之間就是放置表單元素的地方，form 會將網友填完的資料，傳送至 action 所設定的資料傳送目的地，例如傳給一個 PHP 頁面，進行資料的接收，method 是資料傳遞的方式，有 get 與 post 兩種方式，以下先看個實範例與語法，立即了解 HTML 表單的實際應用寫法。

HTML Form 表單範例

範例呈現

姓名：
電話：

範例在 <form> 與 </form> 標籤之中使用了兩個表單元素，分別為文字輸入欄位（<input type='text'>）與送出表單的按鈕（submit），這樣的表單設計完成後，當網友填寫完資料並送出表單，系統就會自動以 get 的方式將資料傳送到 get.php 這支後端程式，這裡需要注意的是 method='get' 的 get 必須是小寫，同樣的 post 也要小寫，至於 get.php 的資料處理功能則需要另外寫。

常見表單元素

表單元素	語法
文字輸入欄位 input type= text	<input type="text" name="" value="">
密碼輸入欄位 input type= password	<input type="password" name="" value="">
下拉選單 select option	<select name=""><option value=""></option></select>
選項按鈕 radio buttons	<input type="radio" name="" value="">
核取方塊 checkbox	<input type="checkbox" name="" value="">
文字輸入欄位 textarea	<textarea name=""></textarea>
隱藏欄位 input hidden	<input type="hidden" name="" value="">
顯示表單按鈕 button	<input type="button" name="">
送出表單按鈕 submit	<input type="submit" name="" value="送出表單">

這些表單的元素可以自由搭配成為一個完整的表單，以上每個元素都有他獨特的屬性以及語法規則，建議每個元素都弄清楚，以後使用上才能比較順手。

另外，很多人都會問，用 HTML 寫好一個表單，接下來呢？要如何儲存網友所填的資料？這個部分需要伺服器端的程式語言來處理，例如 PHP 就是常用的一種，我們另外再寫一篇解說，建議先將 HTML Form 表單各項功能熟悉。