表单

Form

UI 组件也叫：表单区域、录入表单、填写表单、Form Item

一句话：把多个输入控件、字段名、校验提示和提交按钮组织在一起，用来收集并提交用户填写的信息。

详细解释

表单是一组输入控件的容器：每一行是一个表单项，由字段名、输入控件（输入框、下拉选择、复选框等）、帮助文字和错误提示组成，底部是「提交」「取消」按钮。字段名可以放在控件上方，适合手机和长表单；也可以放在左侧对齐，适合后台。必填项通常在字段名前加红色星号。

好表单的要点：相关字段分组并加小标题，控件宽度和内容长度匹配，失去焦点时就提示错误，而不是提交后一次性报一堆错，提交中按钮显示加载状态。字段很多时考虑拆成 分步向导。

表单只用于「填写」。只是展示一条记录的信息，比如订单详情，应该用 描述列表 这种纯文字排版，而不是一排排禁用的输入框。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

做一个「新建联系人」表单，字段名放在控件上方：姓名、手机号（必填）、邮箱、分组（下拉选择）、备注（多行文本框）。必填项前加星号，失去焦点时校验并在控件下方显示错误；底部右对齐「取消」「保存」，保存时按钮显示加载中。

由若干表单项（字段名、输入控件、帮助或错误提示）和底部的操作按钮组成，字段多时按主题分组。

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