UI 组件 · 表单输入
表单
Form
也叫：表单区域、录入表单、填写表单、Form Item
把多个输入控件、字段名、校验提示和提交按钮组织在一起，用来收集并提交用户填写的信息。
点「标注」看每个部分叫什么。
怎么跟 AI 说
改成你的业务内容再发做一个「新建联系人」表单，字段名放在控件上方：姓名、手机号（必填）、邮箱、分组（下拉选择）、备注（多行文本框）。必填项前加星号，失去焦点时校验并在控件下方显示错误；底部右对齐「取消」「保存」，保存时按钮显示加载中。
发给
01判断
你的内容是这样吗？
对照两列，确认表单是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
把只读的详情页做成一排排禁用的输入框，灰底灰字难以阅读，还让人以为能改
- 02
所有字段一律占满整行，手机号、邮编这类短内容的框也拉得很长
- 03
点提交后才一次性报出所有错误，也不滚动到第一个出错的位置
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
由若干表单项（字段名、输入控件、帮助或错误提示）和底部的操作按钮组成，字段多时按主题分组。
组成部分点一下，在上面的线框里标出来
识别特征
- 1纵向排列的多行「字段名 + 输入框」
- 2必填字段名前有星号，部分输入框下方有灰色说明或红色错误提示
- 3底部有一组「提交」「取消」或「保存」按钮
04解释
详细解释
表单是一组输入控件的容器：每一行是一个表单项，由字段名、输入控件（输入框、下拉选择、复选框等）、帮助文字和错误提示组成，底部是「提交」「取消」按钮。字段名可以放在控件上方，适合手机和长表单；也可以放在左侧对齐，适合后台。必填项通常在字段名前加红色星号。
好表单的要点：相关字段分组并加小标题，控件宽度和内容长度匹配，失去焦点时就提示错误，而不是提交后一次性报一堆错，提交中按钮显示加载状态。字段很多时考虑拆成 分步向导。
表单只用于「填写」。只是展示一条记录的信息，比如订单详情，应该用 描述列表 这种纯文字排版，而不是一排排禁用的输入框。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-form- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
form[role="form"].ant-form.el-form.arco-form.t-form.n-form
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
form
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
Form
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
含输入控件
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30