表单页：输入、校验和提交
从选布局、选输入控件到校验和提交反馈，把一张表单页需要的词串起来，附可直接复制的指令。
表单页很容易「做出来但不好用」。先选对布局，再选对输入控件，最后把校验和提交的反馈说清楚。
先选布局
- 单页表单：新建或编辑一条记录，字段在二十个以内、彼此没有先后依赖，填完统一提交一次。
- 分步向导：操作有明确先后，后一步依赖前一步的结果，或者字段多到可以分成三到五组。顶部配一个步骤条，让用户知道一共几步、还剩多少。
- 设置页：选项多且彼此独立，用户会不定期回来只改一两项。
只有四五个字段就别拆成三步；只看不改的详情别做成表单，用描述列表。
再选输入控件
- 输入框：姓名、手机号、邮箱这类一行写完的短内容。手机号、邮箱要用对应的输入类型，手机上才会弹出合适的键盘。
- 多行文本框：备注、反馈这类可能有好几句话的内容，有字数上限就显示计数。
- 数字输入框：数量、天数这类需要加减的数值。手机号、验证码虽然由数字组成，也用普通输入框。
- 下拉选择、单选框、复选框：六个以上选项用下拉，二到五个互斥选项用单选框，可以多选的用复选框。
- 开关：切换后立即生效的设置。要点「保存」才生效的选项用复选框，同一张表单里别混用。
- 日期选择器：预约日期、截止日期。选生日这类很早的日期，要能快速切换年份。
- 上传：提前写明格式和大小限制，上传中显示进度，图片传完显示缩略图。
校验和提交
表单校验要在字段旁边给出具体提示，比如「手机号应为 11 位」，不要只弹一条几秒就消失的轻提示。提交按钮点击后进入加载状态，同时变成禁用状态，防止网络慢时重复提交。提交失败时，在表单上方用警告提示说明原因，并滚动到第一个出错的字段。
怎么跟 AI 描述
做一个新建客户的单页表单，字段分两组：基本信息（姓名、手机号、邮箱、所属城市用下拉选择）、跟进信息（客户等级用单选框 A/B/C，下次跟进日期用日期选择器，备注用多行文本框）。手机号和邮箱失去焦点时校验，错误提示显示在输入框下方。提交按钮点击后显示加载中并禁用，失败时在表单顶部用警告提示说明原因。
注册流程改成分步向导，分三步：账号信息、个人资料、确认提交，顶部用步骤条。点「下一步」时先校验当前步骤，返回上一步时保留已填的内容。