一、表單(Form)作用：與網路上使用者進行線上交談、互動之輸入介面(環境)
二、表單結構
| <form action=”…./g.cgi”
Method=”post”> </form> |
說明：
method : post or get
三、表單中基本元件設計：
．每一元件都有name（物件名稱）
．一個網頁可含多個表單（表單亦是物件）
<input type=text value="input your name" maxlength=12 size=3>
．內定型式：
<input type=text >
．控制輸入文字長度：
<input type=text maxlength=12 >
．控制輸入盒大小：
<input type=text size=3>
．輸入預設值
<input type=text value="input your name" >
2.密碼輸入盒：password
密碼<input type=password name=pas1 maxlength=12 size=3>
3.串列盒(list box)
．下拉式串列盒：size=1
學歷：
<select name="sch" size=1>
<option value="研究所">研究所
<option value="大專" selected>大專
<option value="高中職">高中職
<option value="國中小">國中小
</select>
．含捲動軸串列盒（部份內容顯現）：size<項數
<select name="sch" size=3>
．不含捲動軸之串列盒：size=項數
購買物品
<select name="buy" size=4>
<option value="東瓜">東瓜
<option value="西瓜">西瓜
<option value="南瓜">南瓜
<option value="胡瓜">胡瓜
</select>
．含預選項目
<option value="西瓜" selected>西瓜
4.單選鈕（Radio Button）
．無預設（圈選）
姓別
<input type=radio name=sex value= "男">男
<input type=radio name=sex value= "女">女
．含預設項目
<input type=radio name=sex value= "女" checked>女
5.複選鈕(檢查/方塊)
．內定型式
<input type=checkbox name=qc1 >新鮮
<input type=checkbox name=qc1>甜度
<input type=checkbox name=qc1>光澤
．預設選取項目：
<input type=checkbox name=qc1 checked>新鮮
6.多列文字輸入盒
．內定型式
意見欄
<textarea name="comment">
</textarea>
．欄（cols）、列設(rows)設定
意見欄
<textarea name="comment" rows=10 cols=30>
</textarea>
．預設內容
意見欄
<textarea name="comment" rows=10 cols=30>
please input comment
</textarea>
7.按鈕：
．清除鈕：清除使用者方才輸入表單內容
<input type=reset name=clear>
(2)自訂按鈕標題
<input type=reset name=clear value="清除">
．傳送鈕：將表單內容傳送給SERVER CGI程式做進一步處理
(1)內定型式
<input type=submit name=send >
<input type=submit name=send value="確定">
8.範例：
(1)基本範例：
<html>福爾摩沙公司線上採購系統
<hr>
請填入您的資料<br>
<form action="" methos="post">
密碼<input type=password name=pas1 maxlength=12 size=3>
    
姓名：
<input type=text value="input your name" maxlength=12 size=3>
<br>
學歷：
<select name="sch" size=1>
<option value="研究所">研究所
<option value="大專" selected>大專
<option value="高中職">高中職
<option value="國中小">國中小
</select><br>
購買物品
<select name="buy" size=4>
<option value="東瓜">東瓜
<option value="西瓜" selected>西瓜
<option value="南瓜">南瓜
<option value="胡瓜">胡瓜
</select><br>
姓別
<input type=radio name=sex value= "男" checked>男
<input type=radio name=sex value= "女" checked>女
<br>
<input type=checkbox name=qc1 checked>新鮮
<input type=checkbox name=qc1>甜度
<input type=checkbox name=qc1>光澤
<br>
意見欄
<textarea name="comment" rows=10 cols=30>
</textarea>
<input type=submit name=send value="確定">
   
<input type=reset name=clear value="清除">
</form>
</html>
(2)將表單放入表格：
<html>
<body>
<center>
福爾摩沙公司線上採購系統<hr>
請填入您的資料<br>
<form action="" methos="post">
<table border=2>
<tr>
<td>密碼</td><td><input type=password name=pas1 maxlength=12 size=3></td>
<tr>
<td>姓名</td><td><input type=text value="input your name" maxlength=12 size=3></td>
<tr>
<td>學歷</td>
<td>
<select name="sch" size=1>
<option value="研究所">研究所
<option value="大專" selected>大專
<option value="高中職">高中職
<option value="國中小">國中小
</select>
</td>
<tr>
<td>購買物品</td>
<td>
<select name="buy" size=4>
<option value="東瓜">東瓜
<option value="西瓜" selected>西瓜
<option value="南瓜">南瓜
<option value="胡瓜">胡瓜
</select>
</td>
<tr>
<td>姓別</td>
<input type=radio name=sex value= "男" checked>男
   
<input type=radio name=sex value= "女">女
<tr>
<td>喜歡物品的特色 </td>
<td>
<input type=checkbox name=qc1 checked>新鮮
<input type=checkbox name=qc2>甜度
<input type=checkbox name=qc3>光澤
</td>
<tr>
<td>意見欄</td>
<td>
<textarea name="comment" rows=10 cols=30>
</textarea>
</td>
<tr>
<td><input type=submit name=send value="確定"></td>
<td><input type=reset name=clear value="清除"></td>
</table>
</form></center></body></html>