# Form

> 当用户想做表单、联系表单、注册表单、问卷调查、报名页时使用 — 生成带验证的表单页面

- Skill: `lightpointventures/form` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lightpointventures/form`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lightpointventures/form/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lightpointventures (https://skillmd.com/u/lightpointventures)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lightpointventures/form

---


# 生成表单

帮用户快速生成一个带验证的、可直接使用的表单。

## 步骤

### 1. 确定表单类型

如果用户已经说了，直接开始。否则问：

> 你需要什么类型的表单？常见的有：
> - 联系表单（姓名、邮箱、留言）
> - 注册/登录表单
> - 问卷调查
> - 报名表
> - 订单表单
> - **多步骤向导**（如注册流程：基本信息 > 偏好设置 > 确认提交）
> 也可以直接告诉我需要哪些字段。

### 2. 确认字段

根据表单类型列出默认字段，让用户确认：

> 这个表单包含以下字段：
> （列出字段名、类型、是否必填）
> 需要增减字段吗？

支持的字段类型：
- 文本输入、密码、邮箱、电话、数字
- 下拉选择、单选/多选、开关切换
- 日期选择、时间选择
- **文件上传**（支持拖拽、文件类型限制、大小限制、多文件）
- 富文本编辑器、颜色选择器
- **条件字段**（根据其他字段的值动态显示/隐藏，例：选择"其他"时出现补充说明输入框）

### 3. 生成表单

检测项目技术栈，生成对应的表单代码：

- **字段组件** — 根据上一步确认的类型生成对应组件
- **实时验证** — 必填检查、格式验证（邮箱、手机号）、长度限制、自定义规则
- **错误提示** — 每个字段下方显示具体错误信息，提交时滚动到第一个错误字段
- **提交处理** — loading 状态、防重复提交、成功提示、错误处理
- **样式** — 整洁的布局，移动端友好

多步骤向导额外包含：
- 步骤指示器（当前步骤高亮）
- 上一步/下一步按钮，每步独立验证
- 最后一步显示所有填写内容的确认摘要

无障碍要求（所有表单必须满足）：
- 每个输入框关联 label（使用 for/id 或嵌套）
- 错误信息使用 aria-describedby 关联到对应字段
- 必填字段标注 aria-required="true"
- 支持纯键盘操作：Tab 切换字段、Enter 提交、Escape 关闭弹窗
- 焦点管理：页面加载后聚焦第一个字段，提交失败后聚焦第一个错误字段

### 4. 确认

> 表单已生成。需要调整字段、样式或验证规则吗？

完成后提示：
> 用 /api 生成表单提交的后端接口。用 /email 配置表单提交后发送通知邮件。

## 遇到问题

- **验证不生效** — 检查是否在 submit handler 中调用了验证函数；确认验证规则绑定到了正确的字段 name/id
- **提交后页面刷新导致数据丢失** — form 的 onSubmit 中需要 e.preventDefault()；如果用 action 属性提交，改为 JS 异步提交
- **文件上传失败** — 确认 form 标签有 enctype="multipart/form-data"；检查后端接收文件的大小限制配置
- **手机端键盘遮挡输入框** — 输入框获取焦点时用 scrollIntoView() 滚动到可见区域；避免 fixed 定位的提交按钮遮挡底部字段
- **多步骤表单切换步骤后数据丢失** — 确保每步的数据存在父组件 state 中，而不是各步骤的局部 state