壹、表單的應用
表單主要功能係讓使用者輸入資料之用，聽起會不會覺得一頭霧水呢？舉例來說好了，你平常上網購物、搜尋網頁、投票或是註冊網站會員，皆有使用到表單之功能。以下為一般常見的表單應用：
一、網頁搜尋
二、線上投票
三、線上購物
四、會員註冊
貳、表單之設置
表單元件種類可分為四大類，文字文件、清單元件、核取元件及按鈕元件等。
一、表單之基本架構
由一個簡單且基本的登入畫面來瞭解並解說表單的基本架構。圖1及圖2分別為登入畫面之原始碼及以瀏覽器瀏覽之結果。
圖1 登入畫面之原始碼
圖2 以圖1之內容所製作之網頁(以瀏覽器瀏覽之結果)
二、<form>標記之介紹及其屬性之使用方法
1.<form>標記
<form>標記及</form>標記之功能分別為為宣告表單之開始及結束，各種表單之元件必須放在<form>標記與</form>標記中間，才能被有效執行。關於<form>標記之輸入語法請詳圖1。【小提示：就好像<table>標記與</table>標記一樣，宣告表格之起始及結束之範圍。】
2.<form>標記之屬性介紹及使用方法
<form>標記之屬性包括有<method>、<action>及<entype>，其使用介紹及使用方法彙整如下：
- <method>屬性：<method>屬性係設定傳送資料之方式，其設定值有"post"與"get"二種。
1.method="get"
利用「get」方式傳送資料時，傳送之資料會直接顯示在網址列上，安全性較有疑慮；此外利用「get」方式進行傳送資料，它有字元限值，最多僅可傳送255個字元，適用於資料量較少之表單。
2.method="post"
利用「post」方式傳送資料時，係將資料封裝之後再傳送，傳送資料沒有字元限制，資料傳送之安全性較高，對於需要保密的資料較常採用「post」方式來傳送。
"post"與"get"二種設定值之使用時機及優缺點彙整示如表1。
表1 "post"與"get"二種設定值之使用時機及優缺點彙整一覽表
- <action>屬性：
- <enctype>屬性：為傳送表單的編碼方式，共計有三種模式。
1.enctype="text/plain"：將表單內容以E-mail傳送時，<enctrype>屬性之設定值必須設定為"text/plain"，否則傳送至E-mail軟體時，會出現亂碼。
2.enctype="multipart/form-data"：若要上傳檔案，<enctrype>屬性之設定值必須設定為"multipart/form-data"。
3.enctype="application/x-www-form-urlencoded"：如果未指定<enctrype>屬性，則<enctrype>屬性會預設為"application/x-www-form-urlencoded"。
三、製作表單所需使用之重要標記介紹
因為製作表單常用之主要表單元件可分為四大類，包括文字元件、清單元件、核取元件及按鈕元件，在此篇中僅介紹其名稱及輸入語法之範例，相關詳細之設定方法將在其它篇幅中說明。表2為製作表單之主要元件名稱及輸入語法之範例。
表2 製作表單之主要元件名稱及輸入語法之範例一覽表
| 表單元件分類 | 元件名稱 | 輸入語法範例 | 備註 |
| 文字元件 | text | <input type="text" name="username" value="在此輸入文字" size="10" maxlength="10" readonly> | |
| textarea | <textarea cols="20" rows="2" name="文字區域欄位" wrap="virtual"></textarea readonly> | ||
| pqssword | <input type="password" name="在此輸入密碼" size="15"> | ||
| 清單元件 | select | <select size="4" name="name"> | |
| 核取元件 | radio | <input type="radio" name="gender" value="女" align="nmiddle" checked> | |
| checkbox | <input type="checkbox" name="interest" value="看電影" align="middle" checked>看電影 | ||
| 按鈕元件 | submit | <input type="submit" name="aa" value="送出" align="middle"> | |
| reset | <input type="reset" name="bb" value="重新設定" align="middle"> | ||
| button | <input type="button" name="cc" value="回到上一頁" align="middle"> |
