4-1 嚙踝蕭嚙踝蕭 (Forms)

表單（Forms）是 HTML 的一個重要標籤。一般的 HTML 標籤，只是為了用來呈現網頁的資訊，以便使用者在客戶端瀏覽。表單不只是有呈現資訊的功能，更重要的是，它包含了數種表單元素（Form Elements），可以讓使用者進行資料填寫或選取的功能，並將使用者所填寫的資料送到伺服器端，進行必要的處理。因此我們可以說，表單就是客戶端和伺服器進行資訊溝通的第一個門面。

表單將使用者輸入的資料送到伺服器後，伺服器端必須有相對的程式來對資料進行處理（例如送入資料庫或進行統計分析）。由於本章仍屬於 HTML 範疇，因此我們只會介紹表單在 HTML 中的原始碼，及其在網頁中所呈現的外觀。有關在伺服器端、處理表單資料的處理程式，在此並不介紹，讀者若有興趣，可自行參考有關 ASP、CGI 及 Perl 等章節。

所謂「百聞不如一見」，讓我們先看看一個表單的簡單範例：

Example（form01.htm）：

上述範例的完整原始檔案如下：

原始檔（form01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<BODY>
<FORM action="mailto:test@cs.nthu.edu.tw" method="post">
	名字：<INPUT name="myname" size=10 maxlength=20 value="蕭亞軒"><P>
	密碼：<INPUT name="passwd" type=password size=8 maxlength=8><P>
	性別：<INPUT name="sex" type=radio value="男">男
	     <INPUT name="sex" type=radio value="女" checked>女<P>
	嗜好（可複選）：
		<INPUT name="f1" type=checkbox value="book">閱讀
		<INPUT name="f2" type=checkbox value="sport" checked>運動
		<INPUT name="f3" type=checkbox value="music" checked>音樂
		<INPUT name="f4" type=checkbox value="sleep">睡覺
		<INPUT name="f4" type=checkbox value="talk">聊天<P>
	<INPUT type="submit" value="送出表單">
	<INPUT type="reset" value="重新輸入">
</FORM>
</BODY>
</HTML>

由上述的範例可看出，表單是由 form 標籤所形成，可包含數個選項，action 代表處理表單資訊的程式，method 則代表表單資訊的傳送方法。在上例中，action 是設定成一個電子郵件帳號，因此當使用這按下「送出表單」時，所有在表單輸入的資料，會被送到此電子郵件。（上例中的郵件帳號是亂寫的，因此如果你將表單送出，最後可能會遭到退件。）有關於 method 選項，在此不細談，讀者可先參考有關 ASP 或 CGI 的章節。

在表單內部，還有許多表單元素（Form elements），以便讓使用者輸入資料。以上例而言，這些表單元素的標籤都是 input，並根據 type 的不同，而有不同的功能。

HTML 簡介與應用