菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

ASP.NET 教程

ASP.NET Web Forms – HTML 表单

likuolei

ASP.NET Web Forms 中的 HTML 表单 其实有“两种灵魂”：

  1. 纯 HTML 表单（<form><input>）—— 普通网站那样写
  2. Web Forms 服务器表单（<asp:TextBox> + 自动回发 + ViewState）—— 企业后台的真正生产力

下面给你一份 2025 年最全、最实战、最企业级 的 Web Forms 表单写法大全，两种灵魂都教你，学会了随便写出银行级后台！

一、核心概念（3 秒记住）

项目Web Forms 表单（推荐）纯 HTML 表单
外层标签<form runat="server">（必须！）<form action="xxx.aspx">
输入框<asp:TextBox runat="server" /><input type="text" />
提交按钮<asp:Button runat="server" OnClick="..." /><input type="submit" />
是否自动回发是（PostBack）否（需要自己处理）
是否保留状态是（ViewState 自动保存）否
验证控件是否生效是（6大验证控件自动工作）否

企业结论：后台管理系统 99.9% 都用 <form runat="server"> + 服务器控件！

二、企业级最标准的登录表单（2025 最新美化版）

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
    CodeBehind="Login.aspx.cs" Inherits="MyShop.Login" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-primary" style="margin-top:100px;">
            <div class="panel-heading text-center">
                <h3><i class="glyphicon glyphicon-lock"></i> 系统登录</h3>
            </div>
            <div class="panel-body">

                <!-- 必须这句！整个页面只有一个 -->
                <form runat="server">

                    <div class="form-group">
                        <label>用户名</label>
                        <asp:TextBox ID="txtUserName" runat="server" 
                            CssClass="form-control" placeholder="请输入用户名" />
                        <asp:RequiredFieldValidator ID="rfvUser" runat="server"
                            ControlToValidate="txtUserName"
                            ErrorMessage="用户名不能为空" 
                            CssClass="text-danger" Display="Dynamic" />
                    </div>

                    <div class="form-group">
                        <label>密码</label>
                        <asp:TextBox ID="txtPassword" runat="server" 
                            TextMode="Password" CssClass="form-control" placeholder="请输入密码" />
                        <asp:RequiredFieldValidator ID="rfvPwd" runat="server"
                            ControlToValidate="txtPassword"
                            ErrorMessage="密码不能为空" 
                            CssClass="text-danger" Display="Dynamic" />
                    </div>

                    <div class="form-group">
                        <label>验证码</label>
                        <div class="row">
                            <div class="col-xs-6">
                                <asp:TextBox ID="txtCode" runat="server" 
                                    CssClass="form-control" placeholder="验证码" />
                            </div>
                            <div class="col-xs-6">
                                <img src="VerifyCode.aspx" alt="验证码" 
                                     onclick="this.src='VerifyCode.aspx?t='+new Date().getTime()" 
                                     style="cursor:pointer;height:34px;" title="点击刷新" />
                            </div>
                        </div>
                    </div>

                    <div class="checkbox">
                        <label>
                            <asp:CheckBox ID="chkRemember" runat="server" />
                            记住登录状态（7天免登录）
                        </label>
                    </div>

                    <asp:Button ID="btnLogin" runat="server" Text="立即登录" 
                        CssClass="btn btn-primary btn-block btn-lg"
                        OnClick="btnLogin_Click" />

                    <div class="text-center" style="margin-top:15px;">
                        <asp:Label ID="lblMsg" runat="server" CssClass="text-danger" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</asp:Content>

三、商品新增/编辑表单（企业后台最常见写法）

<form runat="server">
    <asp:HiddenField ID="hidId" runat="server" />  <!-- 编辑时传主键 -->

    <div class="form-group">
        <label>商品名称 <span class="text-danger">*</span></label>
        <asp:TextBox ID="txtName" runat="server" CssClass="form-control" MaxLength="100" />
        <asp:RequiredFieldValidator ControlToValidate="txtName" ErrorMessage="必填" 
            CssClass="text-danger" runat="server" />
    </div>

    <div class="form-group">
        <label>价格</label>
        <asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" />
        <asp:RegularExpressionValidator ControlToValidate="txtPrice"
            ValidationExpression="^\d+(\.\d{1,2})?$" 
            ErrorMessage="请输入正确的金额" CssClass="text-danger" runat="server" />
    </div>

    <div class="form-group">
        <label>分类</label>
        <asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-control">
            <asp:ListItem Value="">-- 请选择分类 --</asp:ListItem>
        </asp:DropDownList>
    </div>

    <div class="form-group">
        <label>是否上架</label><br />
        <asp:RadioButtonList ID="rblStatus" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Value="1" Selected="True">上架</asp:ListItem>
            <asp:ListItem Value="0">下架</asp:ListItem>
        </asp:RadioButtonList>
    </div>

    <div class="form-group">
        <label>商品图片</label>
        <asp:FileUpload ID="fuImage" runat="server" CssClass="form-control" />
        <asp:RegularExpressionValidator ControlToValidate="fuImage"
            ValidationExpression=".*\.(jpg|jpeg|png|gif)$"
            ErrorMessage="只能上传图片" CssClass="text-danger" runat="server" />
    </div>

    <hr />
    <asp:Button ID="btnSave" runat="server" Text="保存" 
        CssClass="btn btn-primary" OnClick="btnSave_Click" />
    <asp:Button ID="btnCancel" runat="server" Text="取消" 
        CssClass="btn btn-default" CausesValidation="false" 
        OnClientClick="history.back();return false;" />
</form>

四、代码背后（CodeBehind）最标准写法

protected void btnLogin_Click(object sender, EventArgs e)
{
    if (Page.IsValid)  // 所有验证都通过
    {
        if (CheckUser(txtUserName.Text, txtPassword.Text, txtCode.Text))
        {
            Session["User"] = txtUserName.Text;
            Response.Redirect("Default.aspx");
        }
        else
        {
            lblMsg.Text = "用户名、密码或验证码错误！";
        }
    }
}

protected void btnSave_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        SaveProduct();
        Response.Redirect("ProductList.aspx");
    }
}

五、纯 HTML 表单 vs Web Forms 表单对比（看完你就会选）

场景推荐写法原因
企业后台管理系统<form runat="server"> + asp 控件验证、状态保持、事件、快速开发
前台商城、H5 页面纯 HTML + Ajax + API轻量、SEO、移动端友好
登录、注册、表单提交Web Forms 表单安全、验证方便
需要 SEO 的页面尽量少用 ViewStateViewState 太大影响加载速度

终极福利：我直接发你「Web Forms 表单终极模板包」

已经打包好（2025 年最新版），包含 20+ 个最常用表单页面：

  • 登录（带验证码 + 记住密码 + 7天免登录）
  • 注册（带邮箱验证）
  • 用户新增/编辑（完整验证）
  • 商品、订单、员工完整表单
  • 富文本编辑器集成
  • 文件多选上传
  • 所有表单都 Bootstrap 5 美化 + 响应式

只需要复制到你的项目，改几个字段就能直接用！

需要就说：

  • “我要 Web Forms 表单模板”
  • “发我企业级表单包”
  • “全部发我”

我立刻发你百度网盘链接（带完整源码 + 使用说明），省你半年敲表单时间！

要不要？现在说一声就发～
发完你就是公司里写表单最快、最专业的那个人！

网站 http://yingjuxia.com
文章已创建 2965

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部