跳到主要内容
Termlib

UI 组件 · 表单

表单项

Form Item

也叫：表单字段、字段、表单行、Form Field、Form Group、Field

表单里的一个字段单元：字段名、输入控件、帮助说明和错误提示组合在一起，是表单的基本组成块。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

把表单里的每个字段做成统一的表单项：字段名在上（14px、深灰，用 label 并通过 for 关联控件），必填字段名后加红色星号；控件高 36px、宽度撑满；控件下方一行 12px 灰色帮助说明，校验失败时换成红色错误提示，并给控件加红色边框，提示写清楚原因和改法（例如「手机号应为 11 位数字」）。表单项之间间距 20px，帮助 / 错误那一行固定预留高度，报错时布局不跳动。

发给

01判断

你的内容是这样吗？

对照两列，确认表单项是不是你要找的。

符合这些情况，用表单项

  • 任何需要用户填写的字段：注册、下单、设置、后台的新建和编辑
  • 字段需要说明填写格式或用途，要在控件旁边给出帮助文字时
  • 需要在具体字段下方即时显示校验错误时

是这些情况，换成别的

  • 只展示、不能编辑的信息，用描述列表，不要摆一排禁用的输入框

    改用描述列表

  • 页面顶部只有一个搜索框，直接用搜索框，不需要字段名和帮助说明

    改用搜索框

  • 表格上方的一排查询条件

    改用筛选栏

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只用占位文字当字段名，用户一开始输入，就忘了这一栏要填什么

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    所有错误提示都堆在表单顶部，用户得来回对照找是哪一栏错了

  3. 03

    字段名、控件、说明的间距各不相同，看不出哪行说明属于哪个输入框

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由字段名（label，可带必填标记和提示图标）、输入控件、帮助说明和错误提示组成，字段名可以在控件上方或左侧。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一行小字字段名，下面或右边紧跟一个输入框或下拉框
  2. 2字段名旁常有红色星号，控件下方有一行灰色或红色小字
  3. 3多个这样的单元上下对齐排列，间距一致

04解释

详细解释

表单项是表单里的一行（或一格）：上面或左边是字段名（label），中间是输入框、下拉选择、单选框这些控件，下面是一行灰色帮助说明，出错时换成红色错误提示。必填字段在名称旁标星号或写「必填」。一张表单就是由很多个表单项排起来的。

它和 输入框 的区别：输入框只是那个能打字的框；表单项是框加上它的名称、说明和报错，是一整个单元。它和 表单 的区别：表单是整张表，负责分组、提交和整体校验；表单项只管一个字段。跟 AI 说「表单项的错误提示放在控件下方」，比说「输入框下面加一行红字」更准确。

字段名要用 label 标签并和控件关联（点名称能聚焦控件，读屏软件也能读出来），不要只用占位文字代替字段名。错误提示紧贴在出错的控件下方，写清楚怎么改；帮助说明和错误提示共用一个位置时，给这一行预留高度，报错时下面的内容才不会跳动。

开发者信息
术语 ID
component-form-item
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-form-item
  • .el-form-item
  • [class*="MuiFormControl-root"]
  • .arco-form-item
  • .t-form__item
  • .n-form-item
  • [data-slot="form-item"]
  • .form-group
  • .mb-3:has(> .form-label)
  • div:has(> label):has(> input, > select, > textarea)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • form-item
  • form-field
  • form-group
  • form-row
  • field-group
  • field-row
  • error-message
  • field-error
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • FormItem
  • FormField
  • FormControl
  • FormGroup
  • Field
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30