ASP 入門教學：表單綜合實作 —— 會員註冊完整流程

透過一個完整的會員註冊案例，串聯表單設計、CSS 美化、多種輸入控制項、伺服器端接收驗證與資料回顯，展示 ASP 表單處理的標準工作流。

前端註冊頁 (login.htm)

<HTML>
<HEAD><TITLE>會員註冊</TITLE>
<style type="text/css">
<!--
body,td,th { font-size: 11pt; color: #009999; line-height: 1.5; }
body { background-color: #ffffff; margin: 0; }
a:link { color: #0000FF; text-decoration: none; }
a:visited { color: #0000FF; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }
a:active { text-decoration: none; }
.style2 {color: #0000FF} .style4 {color: #FF0000}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD>
<body background="4.jpg">
<br><br><br><br><br><br>
<form name="form1" method="post" action="show.asp">
<table width="580" border="2" align="center" bgcolor="#b5b5b4">
<tr bgcolor="#000066" height="40">
<td colspan="2" align="center"><font color="#fffff"><b>請 註 冊</b></font></td></tr>
<tr height="30">
<td align="center">姓名：<input type="text" name="姓名"></td>
<td align="center">密碼：<input type="password" name="密碼"></td></tr>
<tr height="30" align="center">
<td>男：<input type="radio" name="性別" value="男" checked>
女：<input type="radio" name="性別" value="女"></td>
<td>學歷：&nbsp;&nbsp;&nbsp;<select name="學歷" style="width:156px">
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="中專">中專</option>
<option value="大專">大專</option>
<option value="本科" selected>本科</option>
<option value="研究生">研究生</option>
<option value="博士生">博士生</option>
</select></td></tr>
<tr height="30" align="center">
<td colspan="2">
<input type="checkbox" name="愛好" value="讀書">讀書&nbsp;
<input type="checkbox" name="愛好" value="郊游">郊游&nbsp;
<input type="checkbox" name="愛好" value="跳舞">跳舞&nbsp;
<input type="checkbox" name="愛好" value="唱歌">唱歌&nbsp;
<input type="checkbox" name="愛好" value="看新聞">看新聞&nbsp;
<input type="checkbox" name="愛好" value="聚會">聚會&nbsp;
</td></tr>
<tr>
<td colspan="2">
<font color="red"><b>&nbsp;&nbsp;您最喜歡的格言：</b></font>
<p> <textarea name="格言" rows="6" cols="70">&nbsp;&nbsp;&nbsp;&nbsp;世上要學的...（預設文字）</textarea></td></tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="提交" value=" 提 交 ">&nbsp;
<input type="reset" name="重置" value=" 重 置 "></td></tr>
</table>
</form>
</body></HTML>

後端顯示頁 (show.asp)

<HTML><HEAD><TITLE>註冊結果</TITLE>
<style type="text/css"><!-- ...（同 login.htm 樣式） --></style>
<body background="4.jpg"><br><br><br><br><br><br>
<%
Dim name, ps, sex, schoolage, like1, adage
name = Request.Form("姓名")
ps = Request.Form("密碼")
sex = Request.Form("性別")
If sex = "男" Then sex = "帥哥" Else sex = "亮妹" End If
schoolage = Request.Form("學歷")
like1 = Request.Form("愛好")
adage = Request.Form("格言")
%>
<center>
<table border="2" width="500">
<tr><th colspan="2" bgcolor="#009966"><font color="#ffffff">您 的 資 料 如 下 ：</font></th></tr>
<tr align="center" height="350" valign="middle" bgcolor="#FFFFFF">
<td align="center">
歡迎<%=name%><%=sex%>的光臨！<p>
您的愛好是：<%=like1%><p>
您的學歷是：<%=schoolage%><p>
您的密碼是：<%=ps%><p>
<table>
<tr><th><font color="red">您的格言是：</font><p></th></tr>
<tr><td><%=adage%></td></tr>
</table>
</td></tr></table>
</center></body></HTML>

關鍵技術點解析

安全性與健壯性增強建議

1. 輸入驗證：伺服器端必須檢查必填、長度、格式（Email、電話、身分證字號等），不可只信任前端 JS 驗證。
2. HTML 編碼輸出：回顯使用者輸入時，使用 Server.HTMLEncode 防止 XSS：Response.Write Server.HTMLEncode(name)。
3. 密碼不回顯：實務上絕不在確認頁顯示密碼明文，僅提示「密碼已設定」。
4. CSRF 防護：表單加入隱藏 __token，伺服器驗證 Session 中 token 一致。
5. 資料庫參數化：寫入資料庫時使用 Command.Parameters 或 ADODB.Parameter 防 SQL Injection。
6. 檔案上傳：若擴充檔案上傳，需用 enctype="multipart/form-data" 並採用元件 (如 ASPUpload) 或 Request.BinaryRead 解析。

進階擴充：單一檔案自我回傳模式

<%@ Language=VBScript %>
<% Option Explicit %>
<%
Dim name, ps, sex, schoolage, like1, adage, errMsg
If Request.Form("姓名") <> "" Then
    ' 驗證邏輯...
    If errMsg = "" Then
        ' 寫入資料庫 / 設定 Session / 導向歡迎頁
        Response.Redirect "welcome.asp"
        Response.End
    End If
End If
%>
<html>...（表單 HTML）...
<% If errMsg <> "" Then Response.Write "<div class='error'>" & errMsg & "</div>" %>
...（表單欄位保留用戶輸入：value="<%=Server.HTMLEncode(name)%>"） ...
</html>

此模式優點：URL 不變、回顯錯誤與保留輸入更自然、前後端程式碼聚合易維護。

掌握表單完整流程，是建構任何互動式 Web 應用的核心能力。