项目：报名表单页——让用户动手填的页面

项目库第 4 个项目，也是第一个用户要动手操作的页面：姓名、手机、选项、提交、确认反馈——表单四件套一次做齐。填表是网页上最容易做难受的交互，这一篇教你把它做对。

成品长什么样

页面结构：标题 → 表单（姓名 / 手机 / 想值哪一天 / 能做的事）→ 提交按钮 → 确认反馈区 → 后端说明。参考成品在 examples/signup-form/reference.html，直接双击打开试一试：空提交、错手机号、正常提交，各试一遍。

第一步：复制这份需求说明

帮我做一个报名表单页，手机上是主要使用场景。
表单包含四项：
1. 姓名：文本输入，必填；
2. 联系手机：11 位数字，填错要提示，不要直接提交；
3. 「想值哪一天」：下拉选择，五个选项；
4. 「能做的事」：三个单选项，默认选第一项。
点「提交报名」时做检查：姓名为空或手机不是 11 位，就在按钮上方用绿色之外的颜色提示，不提交；
检查通过就在表单下方显示一条确认反馈，把填的内容复述一遍。
重要如实说明：本页不接后端，提交的信息不上传，页面底部要写清楚这一点。
怎么算做好：空提交、错手机号、正常填写三种情况，反馈各不相同且准确。

操作步骤

1. 建项目文件夹：signup-form。
2. 发需求：把改好的整段发给 AI。
3. 当一次「不配合的用户」：什么都不填直接提交；手机号填 5 位；再正常填一遍。三种情况的反馈应该各不相同——这是假成功状态的反面教材：反馈必须跟着真实结果走。
4. 改一项字段：比如把「想值哪一天」的选项换成你的真实场景。用模板二，只动一处。
5. 读一遍确认反馈：确认反馈里复述了用户填的内容吗？没有就加——让用户确认「我刚才提交的确实是这个」。

成功检查

• 三个错误场景的提示各不相同：空姓名、错手机、正常提交
• 正常提交后，确认反馈复述了你填的内容
• 手机宽度下输入框不溢出、键盘弹出时不挡按钮
• 页面上写清楚了「信息不会上传」

常见卡点

• AI 给了假成功提示：没检查就直接显示「报名成功」是重灾区——用模板四发：「现在提交必显示成功，但页面没接后端。把反馈改成：未接后端时如实说明」。
• 手机上点输入框页面乱跳：通常是 viewport 缺失或字号小于 16px 导致手机浏览器自动缩放，让 AI 检查这两处。
• 想真的存数据：表单要接后端才能存——先读数据存在哪弄明白原理；想在浏览器本机先存着玩，看简易记账页的 localStorage 用法。

下一步

• 想要页面「自己动」？倒计时页用几行 JavaScript 让数字每秒刷新。
• 表单为什么会「提交到服务器」？读前端与后端。