ASP 入門教學：進階表單控制項 —— Textarea、Select、Fieldset 完整指南

除了基本的 <input>，HTML 尚提供 <textarea>（多行文字）、<select>（下拉/清單選單）、<fieldset>（群組框架）等進階控制項，滿足更豐富的資料輸入需求。

1. Textarea 多行文字輸入區

語法結構

<form name="表單名" method="get|post" action="URL">
<textarea name="名稱" rows="行數" cols="字元寬度" [readonly]>預設文字</textarea>
</form>

屬性說明

預設值：置於 <textarea>...</textarea> 之間，可包含換行。

完整範例：留言板 (8.asp)

<html>
<head><title>多行文字輸入</title>
<style>body,td,th{font-size:11pt;color:#000;line-height:1.5} body{margin-top:50px}</style></head>
<body>
<form method="post" name="form1" action="8.asp">
<table align="center" bgcolor="#d6d3ce">
<tr><th bgcolor="#0099cc"><font color="#ffffff">多行文字輸入</font></th></tr>
<tr><td height="50" align="left"><font color="#000000">請您留言：</font></td></tr>
<tr><td height="50"><textarea name="內容" cols="50" rows="4">贈人玫瑰，手留餘香。</textarea></td></tr>
<tr align="center"><td height="50">
<input type="submit" value="提交" name="btnSubmit">
<input type="reset" value="重置" name="btnReset"></td></tr>
</table>
</form>
<p><p><center>**********************************************</center>
<%
Dim f1
f1 = Request.Form("內容")
If f1 <> "" Then
    Response.Write "<center><b>您的留言為：" & f1 & "</b></center>"
Else
    Response.Write "<center><b>您還沒有留言。</b></center>"
End If
%>
</body></html>

2. Select 下拉選單 / 清單方塊

語法結構

<form name="表單名" method="get|post" action="URL">
<select name="名稱" size="可見選項數" [multiple]>
    <option [selected] value="值1">顯示文字1</option>
    <option [selected] value="值2">顯示文字2</option>
    ...
</select>
</form>

Select 屬性

Option 屬性

完整範例：城市選單與即時顯示 (9.asp)

<html>
<head><title>使用清單方塊</title>
<style>body,td,th{font-size:11pt;color:#000;line-height:1.5} body{margin-top:50px}</style></head>
<body>
<center><h3>使用清單方塊</h3><hr width="50%">
<select size="2" style="width:100px;" name="select1">
<option value="Bei jings">北京</option>
<option value="Shang hai">上海</option>
<option value="Tian jin">天津</option>
<option value="Chong qing">重慶</option>
</select><p>
清單選項個數：<input type="text" name="text1" size="3"></p>
選定項 Value：<input type="text" name="text2" size="10"></p>
選定項 Text：<input type="text" name="text3" size="10"></p></center>
<script for="select1" event="onClick" language="VBScript">
Dim i
i = select1.selectedIndex
text1.value = select1.length
text2.value = select1.options(i).value
text3.value = select1.options(i).text
</script>
</body></html>

說明：客戶端 VBScript (IE) 即時將選取項的索引、值、文字回填至三個文字框。

3. Fieldset + Legend：表單欄位群組化

<form>
<fieldset>
    <legend>個人基本資料</legend>
    姓名：<input type="text" name="name"><br>
    年齡：<input type="number" name="age">
</fieldset>
<fieldset>
    <legend>聯絡方式</legend>
    Email：<input type="email" name="email"><br>
    電話：<input type="tel" name="phone">
</fieldset>
</form>

• <legend> 提供群組標題，瀏覽器預設繪製圍框與標題嵌入框線。
• 語意化結構有助無障礙閱讀器、SEO 理解表單架構。
• 可透過 CSS 自訂框線、背景、標題樣式。

伺服器端取值差異總表

現代化建議

• 新專案優先使用 HTML5 新型別：type="email", tel, url, number, date, color, range 等，瀏覽器內建驗證與鍵盤優化。
• <datalist> 搭配 <input list="..."> 實現自動完成下拉。
• 樣式統一採用 CSS Flex/Grid 取代 <table> 佈局，語意化標籤 (<label>, <fieldset>) 提升無障礙分數。
• 伺服器端驗證永遠是最後防線，前端 HTML5 驗證僅為使用者體驗輔助。

熟練運用 textarea、select、fieldset，能設計出結構清晰、使用者友善、伺服器端易處理的專業表單。