網友基本資料
-->
姓名：
【單選】性別： 男 女
【複選】喜歡吃的水果  芒果 荔枝 龍眼 桃子
生日： 月 日。
留言板：

您現在看到的東西稱之為ＦＯＲＭ，這東西最大的好處是
將靜態的烘培姬變成動態的，也就是說觀看烘培姬的同時
，也可以和該烘培姬的公司或個人做溝通。

腦筋動的快的商人看到這東西眼睛就亮了起來了，因為…

不告訴你，動動腦筋想想看吧！

接下來要由上而下依序教您如何做出上面這些東西。

【一般文字輸入】
範例◆
姓名：
◆HTML寫法◆
<form>
姓名：<input type="text" name="NAME" value="" size="8" maxlength="20">
</form>

秘訣一 假如希望有預設值的話,可利用value參數作設定

範例
<form>
姓名：<input type="text" name="NAME" value="李登輝" size="8" maxlength="20">
</form>

效果

姓名：

秘訣二 假如輸入的資料不希望被別人看見(例如密碼),可利用type參數作設定

範例
<form>
密碼：<input type="password" name="passwd" value="" size="8" maxlength="20">
</form>

效果

密碼：

秘訣三 善加利用maxlength參數限制使用者輸入的資料長度是好的習慣,尤其是要和資料庫結合時

【單選】
◆範例◆
性別： 男 女

◆HTML寫法◆
性別：
<form>
<input type="radio" name="SEX" value="男">男
<input type="radio" name="SEX" value="女">女
</form>

秘訣一 假如希望有預設值的話,可利用checked參數作設定

範例
<form>
<input type="radio" name="SEX" value="男"男>男
<input type="radio" name="SEX" value="女" checked>女
</form>

效果

男 女

【複選】：
◆範例◆
喜歡吃的水果：
芒果 荔枝 龍眼 桃子
◆HTML寫法◆
喜歡吃的水果：<br>
<form>
<input type="checkbox" name="FRUIT1" value="芒果">芒?G
<input type="checkbox" name="FRUIT2" value="荔枝"枝>荔枝
<input type="checkbox" name="FRUIT3" value="龍眼">龍眼
<input type="checkbox" name="FRUIT4" value="桃子">桃子
</form>

秘訣一 假如希望有預設值的話,可利用checked參數作設定

範例
<form>
<input type="checkbox" name="FRUIT1" value="芒果" checked>芒果
<input type="checkbox" name="FRUIT2" value="荔枝">荔枝
<input type="checkbox" name="FRUIT3" value="龍眼" checked>龍眼
<input type="checkbox" name="FRUIT4" value="桃子">桃子
</form>

效果

芒果 荔枝 龍眼 桃子
【下拉式選單】：
◆範例◆
生日：月
◆HTML寫法◆
生日：
<form>
<select name="MONTH">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form>

秘訣一 可以利用selected參數設定預設的選項

範例
<form>
生日：<select name="MONTH">
<option>1
<option>2
<option>3
<option>4
<option>5
<option selected>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form>

效果

生日：月

秘訣二 假如要看到多個選項,可以利用size參數達成

範例
<form>
生日：<select name="MONTH" size="3">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form>

效果

生日：月

秘訣三 假如要能作複選,可以利用multiple參數達成
ps.記得用shift及ctrl鍵配合滑鼠做點選

範例
<form>
生日：<select name="MONTH" size="3" multiple>
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form>

效果

生日：月
【Button】
◆範例◆
◆HTML寫法◆
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
【number】
◆範例◆
Quantity:
◆HTML寫法◆
<form> Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
【文字區域】
◆範例◆
留言板：

◆HTML寫法◆
留言板：<br>
<form>
<textarea name="MESSAGE" rows="5" cols="40"></textarea>
</form>

秘訣一 假如希望有預設值的話,可將預設值置於 <textarea>及</textarea>之間

範例
<form>
<textarea name="MESSAGE" rows="5" cols="40">報告教官：</textarea>
</form>
效果

【送出或清除】
◆範例◆
◆HTML寫法◆
<form>
<input type="submit" value="送給大雄">
<input type="reset" value="清除內容">
</form>
【小叮噹】，填好上面的表格按下『送給大雄』的按鈕後
，電腦就會透過網路將網友的資料送給我嗎？

【大雄】，沒那麼簡單，ＦＯＲＭ上填好的資料還得配合
ＣＧＩor PHP or ASP.net 才能達成這樣的功能喔。