ASP 入門教學：基礎輸入型表單控制項 —— Text、Password、Button 完整指南

<input> 是表單最核心的標籤，透過 type 屬性切換多種輸入控制項。本文詳細解析三大基礎型別：單行文字、密碼、按鈕。

1. 單行文字框 (type="text")

語法與屬性

<form name="表單名" method="get|post" action="URL">
<input type="text" name="名稱" value="預設值" size="顯示寬度" maxlength="最大字元數">
</form>

完整範例：簡易登入表單 (1.asp)

<html><head><title>簡易登入表單</title></head><body>
<form method="post" name="form1" action="1.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr bgcolor="#0099cc"><th colspan="2" align="center"><font color="#fffff">登入表單</font></th></tr>
<tr><td align="right" width="150" height="50">用戶名：</td>
<td width="350" height="50"><input type="text" name="姓名" size="20"></td></tr>
<tr><td colspan="2" align="center">
<input type="reset" name="reset1" value="重設資料">&nbsp;&nbsp;
<input type="submit" name="submit1" value="提交資料"></td></tr></table></form>
<%
Dim t1, a, b
t1 = Request.Form("姓名")
If t1 <> "" Then
    a = "<center><b>您的姓名為："
    b = "</b></center>"
    Response.Write a & t1 & b
Else
    Response.Write "<center><b>您還沒有輸入大名</b></center>"
End If
%>
</body></html>

2. 密碼框 (type="password")

語法與屬性

<input type="password" name="名稱" value="預設值" size="寬度" maxlength="最大長度">

• 屬性同 text，差別在於瀏覽器以星號/圓點遮蔽輸入字元。
• 傳輸內容仍為明文，生產環境必須搭配 HTTPS。
• 不應設定 value 預設密碼 (安全風險)。

完整範例：帳號密碼雙欄 (2.asp)

<html><head><title>登入表單</title></head><body>
<form method="post" name="form1" action="2.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr bgcolor="#0099cc"><th colspan="2" align="center"><font color="#fffff">登入表單</font></th></tr>
<tr><td align="center" width="250" height="50">用戶名：<input type="text" name="姓名" size="14"></td>
<td align="center" width="250" height="50">密碼：<input type="password" name="密碼" size="14"></td></tr>
<tr><td colspan="2" align="center">
<input type="reset" name="rest1" value="重設資料">&nbsp;&nbsp;
<input type="submit" name="submit1" value="提交資料"></td></tr></table></form>
<%
Dim t1, ps, a, b, c
t1 = Request.Form("姓名")
ps = Request.Form("密碼")
If t1 <> "" And ps <> "" Then
    a = "<center><b>您的姓名為："
    b = "</b></center>"
    c = "<center><b>您的密碼為："
    Response.Write a & t1 & b & "<br>"
    Response.Write c & ps & b
Else
    Response.Write "<center><b>您還沒有輸入大名和密碼。</b></center>"
End If
%>
</body></html>

3. 按鈕控制項 (type="submit|reset|button")

三種類型對照

屬性與事件

• name：識別名；submit 若有 name/value 會隨表單提交，可供伺服器端判斷按下哪個按鈕。
• value：按鈕顯示文字。
• onClick：點擊事件處理程序 (VBScript/JS)。

完整範例：按鈕事件示範 (3.asp)

<HTML><HEAD><TITLE>按鈕控制項</TITLE>
<SCRIPT LANGUAGE="VBScript">
Sub MYSUB()
    AB = "這是按鈕的單擊事件"
    MsgBox AB
End Sub
Sub MYSUB1()
    Window.location.href = "https://bianceng.cn"
End Sub
</SCRIPT></HEAD>
<BODY>
<center><H3>呼叫事件程序</H3><HR WIDTH="70%" color="#009999">
<INPUT TYPE="BUTTON" NAME="BUTTON" VALUE="事件" ONCLICK="MYSUB">
<INPUT TYPE="BUTTON" NAME="BUTTON1" VALUE="網易" ONCLICK="MYSUB1">
</center></BODY></HTML>

說明：type="button" 配合 onClick 綁定 VBScript Sub 程序 (需 IE)，分別彈出訊息框與導向網址。

伺服器端判斷按下哪個 Submit 按鈕

<form method="post" action="process.asp">
<input type="submit" name="action" value="新增">
<input type="submit" name="action" value="修改">
<input type="submit" name="action" value="刪除">
</form>

' process.asp
Select Case Request.Form("action")
    Case "新增" : ' 執行新增邏輯
    Case "修改" : ' 執行修改邏輯
    Case "刪除" : ' 執行刪除邏輯
End Select

HTML5 新增型別 (現代專案建議使用)

掌握基礎三大輸入控制項，並善用 HTML5 新型別，能大幅提升表單使用者體驗與資料品質。