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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: lightpointventures
• Source: lightpointventures/claude-code-starter
• License: MIT
• Homepage: https://github.com/lighthouse-strategy/claude-code-starter

Install and usage instructions live in the source repository linked above.