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

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

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

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

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

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

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

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

效果

姓名：

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

範例
<form>
密碼：<input type=password name=passwd value="" size=8 maxlength=8>
</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參數達成

範例
<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>

效果

生日：月
ps.記得用shift及ctrl鍵配合滑鼠做點選
【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>
【小叮噹】，填好上面的表格按下『送給大雄』的按鈕後
，電腦就會透過網路將網友的資料送給我嗎？

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