ASP.NET Web Forms 表單架構：runat="server"、單一表單限制、自動屬性與提交機制

<form runat="server"> 是 ASP.NET Web Forms 頁面的核心容器，**所有伺服器控制項必須置於其中**，提供伺服器端處理、ViewState 管理、PostBack 機制的基礎設施。本文詳細解析表單架構規則、自動屬性生成、提交行為與常見誤區。

核心規則：runat="server" 強制要求

<form runat="server">
    <!-- 所有伺服器控制項必須在這裡 -->
    <asp:TextBox ID="txtName" runat="server" />
    <asp:Button ID="btnSubmit" Text="送出" runat="server" />
    <asp:Label ID="lblResult" runat="server" />
</form>

• runat="server"：指示 ASP.NET 執行階段在伺服器端處理此表單及其內部控制項
• 表單內控制項可被伺服器端程式碼存取（this.txtName、FindControl）
• 缺少 runat="server" 會導致控制項編譯錯誤或無法觸發伺服器事件

單一表單限制：每頁僅能有一個

鐵律：一個 .aspx 頁面**只能包含一個** <form runat="server"> 控制項。

• 嘗試加入第二個會導致編譯錯誤："A page can have only one server-side Form tag."
• 此設計對應 Web Forms **單一 PostBack 入口**架構
• 需求多表單場景：使用 Panel 切換可見性、MultiView/View、或跨頁面 PostBack

自動屬性生成：ASP.NET 幫你補完

若 .aspx 中表單寫法極簡：

<form runat="server"></form>

瀏覽器檢視原始碼會看到 ASP.NET 自動補全：

<form name="ctl01" method="post" action="Default.aspx" id="ctl01"></form>

自動生成屬性對照表

提交機制：永遠提交到自身

• Action 固定：無論是否指定 action 屬性，表單永遠提交到當前頁面 URL
• Method 固定：永遠為 POST，指定 method="get" 無效
• PostBack 循環：提交 → 伺服器處理生命週期 → 回傳新 HTML → 瀏覽器重繪

表單提交觸發方式

1. Button 控制項（標準方式）

<asp:Button ID="btnSubmit" Text="送出" runat="server" OnClick="btnSubmit_Click" />

• 渲染為 <input type="submit">
• 點擊觸發瀏覽器原生提交 → 伺服器 PostBack → 執行 OnClick

2. LinkButton / ImageButton

<asp:LinkButton ID="lnkSubmit" Text="送出" runat="server" OnClick="lnkSubmit_Click" />
<asp:ImageButton ID="imgSubmit" ImageUrl="btn.png" runat="server" OnClick="imgSubmit_Click" />

• 渲染為 JavaScript __doPostBack('控制項ID', '')
• 依賴 JavaScript 啟用，無 JS 環境無法運作

3. JavaScript 手動觸發

<input type="button" value="JS 提交" onclick="__doPostBack('btnHidden', '');" />
<asp:Button ID="btnHidden" runat="server" Style="display:none" OnClick="btnHidden_Click" />

跨頁面提交：PostBackUrl

<asp:Button ID="btnGo" Text="前往結果頁" runat="server" PostBackUrl="~/Result.aspx" />

目標頁面 (Result.aspx) 可存取來源頁面控制項：

// Result.aspx.cs
protected void Page_Load() {
    if (PreviousPage != null && PreviousPage.IsCrossPagePostBack) {
        TextBox txt = (TextBox)PreviousPage.FindControl("txtName");
        if (txt != null) lbl.Text = "來源頁面輸入：" + txt.Text;
    }
}

來源頁面需設定 Page.PreviousPageType 指令以獲得強型別存取。

HTML 表單 vs Web Forms 表單

常見問題與解決方案

1. 「找不到表單」或控制項事件不觸發

• 控制項不在 <form runat="server"> 內部
• Master Page 內容頁未正確放置於 ContentPlaceHolder 內
• 巢狀 Master Page 導致表單結構錯誤

2. 想要 GET 方法提交

• Web Forms 表單強制 POST，無法改為 GET
• 替代方案：Response.Redirect("Target.aspx?param=" + txt.Value) 或 HyperLink 控制項

3. 想要多個表單區塊獨立提交

• 使用 Panel 控制項 Visible 切換顯示不同區塊
• 使用 MultiView/View 管理多步驟精靈
• 使用 ValidationGroup 區分驗證範圍，單一表單支援多邏輯區塊

4. JavaScript 無法存取表單

• ClientID 模式：AutoID (預設 ctl00_ContentPlaceHolder1_btnSubmit) vs Static (固定 ID)
• 設定 ClientIDMode="Static" 讓 ID 可預測
• 或使用 document.querySelector('form[action*="Default.aspx"]') 選取

Master Page 中的表單架構

<!-- MasterPage.master -->
<%@ Master %>
<html><body>
    <form runat="server">
        <header>...</header>
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        <footer>...</footer>
    </form>
</body></html>

內容頁**不需也不應**再宣告 <form runat="server">，直接在 <asp:Content> 放置控制項即可。

最佳實務總結

• 每個 .aspx/.master **恰好一個** <form runat="server">
• 所有 asp: 控制項、HtmlInput 控制項必須在表單內
• 不要嘗試設定 action、method 屬性（會被忽略）
• 使用 ValidationGroup 實現單表單多驗證邏輯
• 跨頁面提交使用 PostBackUrl + PreviousPage
• Master Page 定義表單，內容頁專注內容

掌握 Web Forms 表單架構規則，能避開常見結構性錯誤，建構符合框架設計哲學的穩健頁面。下一節將介紹事件處理機制：Page_Load、IsPostBack、事件委派與生命週期。