Textbox控件和Label控件有什么区别？常见用法对比搭配示例

在 ASP.NET Web Forms 中，TextBox 和 Label 都能在页面上显示文字，但它们的职责不同：TextBox 用来让用户输入或查看可编辑文本；Label 用来显示说明、提示或结果。把两者混用，常见后果是用户无法编辑本该输入的内容、提示文字无法和输入框正确关联，或者把不可信文本当成 HTML 输出。

本文以 .NET Framework 的 ASP.NET Web Forms 为例，说明两个控件的差异、搭配方式和常见边界。它们不是所有 UI 框架中的通用类型：WinForms、WPF、MAUI、第三方组件库也可能有同名控件，但属性、事件和渲染行为不完全相同。

先用一句话区分

• TextBox：输入控件。常见于姓名、搜索词、备注、密码等由用户填写的内容。
• Label：显示控件。常见于字段名称、操作提示、校验结果和提交后的状态消息。

例如，姓名表单通常应该让 Label 显示“姓名”，让旁边的 TextBox 接收姓名。不要把字段说明塞进 TextBox 的初始文本里，再期待用户知道那是提示而不是实际内容。

核心区别对比

最常见的表单搭配：Label 标注，TextBox 输入

在 Web Forms 中，Label 的 AssociatedControlID 可以将标签和对应的服务器控件关联起来。渲染到浏览器后，标签通常会输出为带有 for 属性的 HTML 标签；用户点击标签时，焦点会转到关联的输入框。该关联也有助于辅助技术识别字段名称。

下面是一个完整的简单页面。将代码保存为 Default.aspx，放在已配置 ASP.NET Web Forms 的 .NET Framework 网站中，即可通过按钮提交姓名。

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="utf-8" />
    <title>TextBox 与 Label 示例</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label
                ID="NameLabel"
                runat="server"
                AssociatedControlID="NameTextBox"
                Text="姓名：" />

            <asp:TextBox
                ID="NameTextBox"
                runat="server"
                MaxLength="40" />

            <asp:Button
                ID="SubmitButton"
                runat="server"
                Text="提交"
                OnClick="SubmitButton_Click" />

            <br />

            <asp:Label
                ID="ResultLabel"
                runat="server" />
        </div>
    </form>

    <script runat="server">
        protected void SubmitButton_Click(object sender, EventArgs e)
        {
            string name = NameTextBox.Text.Trim();

            if (string.IsNullOrEmpty(name))
            {
                ResultLabel.Text = "请输入姓名。";
                return;
            }

            ResultLabel.Text = "收到输入。";
        }
    </script>
</body>
</html>

示例中，NameLabel 负责字段说明，NameTextBox 负责接收输入，ResultLabel 负责显示操作反馈。按钮事件读取的是 TextBox.Text，而不是标签的 Text。

这里故意没有把用户输入直接拼进 ResultLabel.Text。在 Web Forms 中，Label.Text 的内容可能按 HTML 内容输出，不应把它当作自动编码的安全输出接口。如果要回显用户输入，应进行适合 HTML 上下文的编码，或者选用明确会编码文本的输出方式。后文会进一步说明。

Label 不是 TextBox 的占位提示

下面这种写法虽然能显示文字，但并不等于有了字段标签：

<asp:TextBox ID="EmailTextBox" runat="server" Text="请输入邮箱" />

“请输入邮箱”现在是输入框的实际内容。用户提交时，它可能被当作邮箱值读取；用户也需要先删除这段文字才能填写。若要表达字段名称，应使用与输入框关联的 Label；若要给出补充说明，应将说明以普通文本或其他合适的说明元素显示在输入框旁边，并确保用户能理解它和字段的关系。

原生 HTML 中经常使用 placeholder 作为输入提示。ASP.NET Web Forms 的 TextBox 不应被假定在所有目标版本和项目配置中都有同名的专用属性；需要时可以添加 HTML 属性，例如 Attributes["placeholder"]。但占位提示会在用户开始输入后消失，不能代替可见标签，也不应承载必需的操作说明。

TextBox 的常见用法和边界

单行文本

默认情况下，TextBox 通常呈现为单行文本输入框，适合姓名、编号、搜索词等较短内容。可用 Text 读取或设置内容，用 MaxLength 限制浏览器端输入的最大字符数。

<asp:Label
    ID="CityLabel"
    runat="server"
    AssociatedControlID="CityTextBox"
    Text="城市：" />

<asp:TextBox
    ID="CityTextBox"
    runat="server"
    MaxLength="60" />

MaxLength 会影响渲染到浏览器的输入控件行为，但不能代替服务器端校验。请求可以由脚本、专用工具或直接构造的 HTTP 请求发送，不能只凭页面上的最大长度限制来保护数据库、业务逻辑或接口。服务器仍应检查长度、格式和业务规则。

多行文本

设置 TextMode="MultiLine" 可以将控件用于较长的备注或说明。Rows 和 Columns 可用于指定呈现尺寸相关的属性，但浏览器实际显示效果还会受样式和布局影响。

<asp:Label
    ID="CommentLabel"
    runat="server"
    AssociatedControlID="CommentTextBox"
    Text="备注：" />

<asp:TextBox
    ID="CommentTextBox"
    runat="server"
    TextMode="MultiLine"
    Rows="5"
    Columns="40"
    MaxLength="1000" />

多行输入适合文本，不适合直接承载任意文件内容或复杂对象。提交后要按实际需求处理换行、长度、存储和输出编码。若输出到 HTML，换行与编码是两个不同问题：编码用于避免输入被浏览器当作 HTML 或脚本解析；换行是否显示，则需结合适合的 HTML 结构或样式处理。

密码输入

设置 TextMode="Password" 会请求浏览器以密码输入形式呈现内容，浏览器通常以圆点等方式遮蔽屏幕上的字符。但这只是显示行为，不会自动加密传输、不代表密码已安全保存，也不保证浏览器不会在任何情况下记住或管理密码。

<asp:Label
    ID="PasswordLabel"
    runat="server"
    AssociatedControlID="PasswordTextBox"
    Text="密码：" />

<asp:TextBox
    ID="PasswordTextBox"
    runat="server"
    TextMode="Password"
    MaxLength="128" />

实际登录和注册功能还需要使用 HTTPS、合适的身份验证流程，并以安全方式存储密码，例如使用经过审慎选择的密码哈希方案。不要把密码原文写入日志或普通数据库字段。密码框遮住字符，并不等于完成了这些安全措施。

另外，密码输入框的值不会像普通文本那样可靠地在回发后重新显示；不要依赖在服务器端给密码框重新设置 Text 来“回填”密码。页面应让用户按需要重新输入，并避免回显密码。

只读和禁用不是一回事

ReadOnly="true" 表示用户不能通过该输入框编辑内容，但控件仍可能参与表单提交。Enabled="false" 则会禁用控件；禁用的浏览器表单控件通常不会随表单提交。二者的视觉效果和服务端提交行为都可能不同，不能因为控件只读或禁用就把客户端值视为可信数据。

<asp:Label
    ID="OrderNumberLabel"
    runat="server"
    AssociatedControlID="OrderNumberTextBox"
    Text="订单号：" />

<asp:TextBox
    ID="OrderNumberTextBox"
    runat="server"
    ReadOnly="true" />

如果某个值不应由客户端决定，更稳妥的做法通常是在服务器端根据已认证用户和业务状态重新计算或读取，而不是信任只读框、隐藏字段或页面回传值。客户端控件属性不是权限控制机制。

Label 的常见用法

显示字段名称

字段名称优先使用 AssociatedControlID 指向对应的服务器输入控件。关联目标应正确，且在同一页面中保持明确。若只是显示一段说明或状态文字，不需要冒充字段标签，也不必随意关联到输入框。

显示操作结果或校验提示

Label 适合显示页面上的状态文本，例如“保存完成”或“请输入有效邮箱”。若错误提示只通过颜色区分，部分用户可能无法识别；应同时提供文字，并根据页面结构考虑让辅助技术能够及时发现动态更新。具体的即时通知方式取决于所使用的 HTML 结构和辅助技术支持情况，不能只依赖控件名称推断。

Label.Text 不等于纯文本安全输出

这是使用 Web Forms 时容易忽略的边界：给 Label.Text 赋值，并不应被理解为“框架必定会把所有内容编码成普通文本”。静态的开发者自有文字通常风险较低；来自用户、外部接口、数据库中可被用户影响的字段等内容，则应在输出到 HTML 前按输出上下文编码。

例如，确实需要将姓名显示到页面时，可以使用 HttpUtility.HtmlEncode 编码后再赋值：

using System.Web;

protected void SubmitButton_Click(object sender, EventArgs e)
{
    string name = NameTextBox.Text.Trim();

    if (string.IsNullOrEmpty(name))
    {
        ResultLabel.Text = "请输入姓名。";
        return;
    }

    ResultLabel.Text = "你好，" + HttpUtility.HtmlEncode(name);
}

上面的代码适用于将普通文本放入 HTML 内容区域的场景。不同输出位置需要不同处理：HTML 属性、JavaScript、URL 等上下文的编码规则并不相同，不能把 HTML 编码当作适用于所有位置的通用方案。更好的做法是避免把不可信数据拼接进脚本或属性，并使用与上下文匹配的安全 API。

输入校验：客户端限制不能替代服务器判断

表单输入要分别考虑易用性和可信性。浏览器端限制可以帮助用户尽早发现问题，但请求最终由服务器处理，因此服务器仍要再次校验。

1. 检查必填项：确认字符串非空，并根据业务规则处理空格。
2. 检查长度：服务端限制最大长度，避免超长内容造成业务或存储问题。
3. 检查格式：例如日期、邮箱或编号，应按明确的格式和业务规则判断。
4. 检查权限和归属：用户提交的记录编号不能证明用户有权修改该记录。
5. 安全地输出：输入校验不能代替输出编码；两者解决的问题不同。

Web Forms 提供验证控件，例如必填验证和正则表达式验证，可用来增强页面体验或配合页面验证流程。但客户端脚本可能被关闭，客户端验证也可能被绕过。服务器端代码必须确保关键业务校验确实执行；对于不同验证器和框架版本，应核对其服务器端验证配置及页面事件中的验证结果。

常见错误及修正方式

错误一：用 Label 收集用户输入

Label 只是显示文本，没有输入框的编辑和提交职责。用户需要填写内容时，使用 TextBox 或其他适合的数据输入控件；只需展示内容时才使用 Label。

错误二：把提示语写进 TextBox.Text

初始的 Text 是字段值，不是说明。它可能被一并提交，用户也可能误以为内容已填写。用关联的 Label 显示字段名，必要的操作说明另行呈现。

错误三：认为 MaxLength 能防止超长请求

MaxLength 主要影响控件在浏览器中的输入行为，不是服务器的安全边界。服务端应独立检查长度，并在数据层设置与业务一致的限制。

错误四：认为 Password 模式可以安全存储密码

密码模式只影响输入框的显示形式。传输加密、身份认证、防止日志泄露和安全存储都需要各自的措施。

错误五：把未经编码的输入直接赋给 Label.Text

如果内容被当作 HTML 解析，恶意标记可能带来跨站脚本风险。对不可信内容进行与输出上下文匹配的编码；不要依赖“它最后进了 Label”来推断安全。

错误六：把只读控件当作服务器端权限保护

页面属性由客户端呈现，客户端提交内容也可能被修改。对每个重要值，都应在服务器端验证来源、权限和业务状态。

错误七：标签与输入框看起来相邻，却没有程序关联

视觉上的靠近不一定构成可访问性关联。Web Forms 的字段标签可通过 AssociatedControlID 指向服务器输入控件。自定义布局或第三方控件可能改变渲染结果，应检查最终生成的 HTML，确认标签确实关联到预期控件。

如何选择

• 用户需要输入或编辑文本：选 TextBox。
• 用户需要填写密码：选设置了密码模式的 TextBox，并另行实现安全认证和存储流程。
• 用户需要输入长备注：选多行 TextBox，并在服务器端检查长度和业务规则。
• 需要说明字段含义：用 Label，并通过 AssociatedControlID 关联对应输入控件。
• 需要显示成功、错误或处理结果：用显示型控件，例如 Label；若内容来源不可信，先按输出上下文编码。
• 值不应由用户修改：评估只读显示是否更合适；无论如何都不能把客户端状态当作授权依据。

总结

TextBox 和 Label 的关键区别不是“一个有框、一个没框”，而是一个负责输入，一个负责说明或展示。标准表单中，两者往往一起使用：用 Label 清楚标明输入字段，用 TextBox 接收内容，再用显示控件反馈操作结果。

真正容易出问题的地方在边界：浏览器端的长度限制不能代替服务器校验；密码框的遮蔽不能代替安全存储；只读状态不能代替权限检查；给 Label.Text 赋值也不等于自动完成安全编码。分清控件职责，并在服务端校验输入、在输出时正确编码，才能让表单既清晰又可靠。