表单标签Label
你可能会说
每栏前面得写清楚要填什么，不然用户看不懂。
表单标签是说明一个输入控件需要填写或选择什么的可见文字登录页的“邮箱”标签应始终显示，并且点击后能让对应输入框获得焦点。必填、格式和错误原因应在附近补充，不能只依赖占位文字。
也常被叫作字段标签输入标签
你可以这样告诉 AI Agent
请给注册表单的用户名、邮箱和密码增加始终可见的标签，并把每个标签与对应输入框关联。占位文字只用于示例，错误和格式要求放在字段附近；测试点击标签是否能聚焦正确输入框。
容易混淆？这样区分
表单标签Label≠标签 Tag
表单标签 Label 说明控件需要填写什么；标签 Tag 用来标记内容的类别、状态或筛选条件。
表单标签Label≠表单 Form
表单标签 Label 只描述一个控件；表单 Form 负责组织并提交整组字段。
什么时候用
- 所有可填写字段：名称、邮箱、密码先说清楚you@example.com
- 必填或格式要求：在标签附近说明规则you@example.com
- 复杂控件：为日期、上传和选择器补一个明确名称you@example.com
什么时候不用
- 只把 placeholder 当作标签：输入后字段用途不再可见you@example.com
- 把字段名写成模糊的“信息”或“内容”you@example.com
- 将整段帮助文本放入标签，增加扫描难度you@example.com
组成结构 · Anatomy
*用于登录
一句话说明用户要提供什么
只在真正必填时标出来
标签点击后应能聚焦这里
补充格式、用途或隐私说明
常见变体 · Variants
顶部标签Top
窄屏和字段较长时
左侧标签Left
桌面端紧凑筛选区
带辅助说明Help text
至少 8 位
需要提醒格式或用途时
典型使用场景
注册表单
个人资料设置
订单地址填写
延伸阅读 · 权威出处
快速练习