WEBTECH 網頁設計教學站
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 action="get.php" method="get">
姓名:<input type='text'><br>
電話:<input type='text'><br>
<p><input type='submit' value='送出表單'></p>
</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 表單各項功能熟悉。

連絡我們