表单

Form

也常被叫作：填写表格表单页注册表单那个要填很多格子的页面

界面与组件通常止于「主路径」约 1 分钟读完

你可能会这么说

「我要一个页面，用户在里面填几项内容，填完点保存，资料就存下来了。」

表单 Form

让用户输入一组信息并一次性提交的容器，注册、下单、填资料都靠它。

表单是一组输入控件 + 一个提交动作的组合。它和散落的输入框的区别在于：它有一条清晰的完整路径——用户从头填到尾，点「保存」或「提交」，整批信息一起被送走。注册、下单、改资料，本质都是一张表单。

表单最容易出错的地方不在输入框本身，而在边界状态。字段哪些必填、填错了怎么提示、提交中能不能重复点、提交失败后填好的内容还在不在——这几件事没想清楚，表单就会让用户填了一遍又一遍。

还有一层是校验的时机和位置。好的做法是：能立刻判断的错，在离开这个框时就提示；需要在提交时才统一的错（比如「两次密码不一致」），在提交后集中显示。提示要贴着眼看的位置，文案要说出「哪一栏、错在哪、怎么改」，而不是一句空泛的「请检查输入」。

长什么样真实可交互，不是截图

修改个人资料

昵称

邮箱格式正确

简介

表单的核心不是长得好看的格子，而是填完能真的提交成功、错了能指着位置说清楚。上面的示例里，「昵称」「邮箱」是必填，「简介」是选填——选填必须在界面上看得出来。

拆开看，里面有这几块

1
字段 Field
一个输入项，通常包含标签、输入框、说明和错误提示。
2
标签 Label
告诉用户这一栏要填什么。永远别用 placeholder 顶替标签，占位字一打字就消失了。
3
校验 Validation
判断输入合不合格的规则：必填、格式、长度。错了要说清哪一栏、错在哪。
4
提交按钮 Submit
把整张表单送出去的动作。提交中要禁用并显示进行中，防重复提交。
5
反馈 Feedback
提交后的结果提示：成功、失败、哪些字段还有错。没有反馈等于让用户干等。

常见的有哪几种

注册表单Sign-up

通常带密码强度、重复确认、协议勾选，字段多但每一步都要能看明白。

用在：新用户注册

登录表单Login

通常只有两三个字段，重在最短路径和错误提示（比如「账号或密码不对」）。

用在：已有账号登录

筛选表单Filter

提交时不跳页，改了条件就刷新列表。重点在「当前用了哪些筛选」要看得见、能一键清除。

用在：搜索、筛选列表

多步骤表单Multi-step

内容太长时拆成几页，要有步骤指示和「上一步」能改。

用在：下单、开户、问卷调查

容易搞混？这样区分

表单 ≠ 输入框 Input

输入框是一个字段（填一个值），表单是一组字段加一个提交动作。只有单独一个输入框、不提交任何东西的（比如页内搜索），不算表单。

看输入框

表单 ≠ 弹窗表单 Modal

弹窗里的表单还是表单，区别只在承载方式：弹窗用来填「快速改一小块」的信息，完整的大流程（注册、下单）适合整页表单。别把又长又复杂的流程硬塞进弹窗。

看弹窗表单

什么时候用得上

注册流程

字段分清楚必填与选填，密码要有确认框，提交中禁用按钮防连点。

修改资料

提交成功后给明确反馈，失败时已填的内容不能丢，错误要指着具体字段说。

登录表单

账号或密码错了，提示要足够清楚又不把信息泄露给外人（比如别直接说「这个邮箱没注册过」）。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [注册页] 的这张表单，不动其他页面和登录逻辑
【字段】昵称（必填，2-12 字）、邮箱（必填，格式校验）、简介（选填）、密码（必填，至少 8 位）
【校验要求】
  - 离开某个框时就校验它的格式，错误要指着这一栏说清楚「哪一栏、错在哪、怎么改」
  - 「密码」和「确认密码」不一致这类跨字段错误，在点提交时再提示
【提交行为】
  - 点提交后按钮禁用并显示「提交中…」，防止重复提交
  - 提交失败时，用户已填的内容必须原样保留，并在对应字段旁标出错误
【边界】不要改配色和页面整体布局；不要新增第三方组件库
【交付】告诉我改了哪些文件、我打开哪个地址、填哪些值能走通一次成功注册，以及哪部分你没验证

这段话把「校验的时机」拆成了两层（离开框时 vs 提交时），这是表单最容易被做错的地方。它还写了「提交失败内容保留」，这一条经常被漏掉，用户会因此填三遍。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

按正常顺序填完整张表点提交，真的提交成功了：有明确成功反馈，不是转个圈又回到原样。
故意留空一个必填项再提交：能被拦住，提示指着具体那一栏，文案说清了怎么改。
填一个错误格式的邮箱，离开这个框：立刻出现该栏的格式提示。
提交成功后刷新页面，确认新数据真的存进去了（比如昵称变了），不是只在界面晃一下。
提交过程中按钮变成禁用态；快速连点三次，只产生一条数据。
手机尺寸下所有字段没有挤到看不清，能正常点到每个框。

它常这么糊弄你

「表单已做完」——但提交后刷新，数据根本没存进去，只有个转圈动画。一定自己提交一次再刷新看结果。
错误提示只有一句笼统的「请检查输入」，不说是哪一栏——用户得靠猜。要求它指着字段说。
校验只在提交时才做，一填错要整张表重来——这不叫表单，叫折磨。要能看到字段级的即时提示。
用 placeholder 当标签：一打字标签就消失，用户根本不知道自己刚才那栏要填什么。
提交中按钮没禁用，连点三次产生了三条重复数据。

表单能验到「主路径」层：你自己从头到尾走通一次成功、一次失败就验完了，不需要看代码。凡是你亲手能走通的流程，就不要接受「已完成」一句话。

考考你选一个你觉得对的

表单提交时，哪种做法是对的？

想再深挖一点靠谱出处

<form>：表单元素MDN ↗Web 表单指南（Forms）MDN ↗

# 表单 (Form)

> 让用户输入一组信息并一次性提交的容器，注册、下单、填资料都靠它。

**你可能会这么说**：我要一个页面，用户在里面填几项内容，填完点保存，资料就存下来了。

表单是一组输入控件 + 一个提交动作的组合。它和散落的输入框的区别在于：它有一条清晰的完整路径——用户从头填到尾，点「保存」或「提交」，整批信息一起被送走。注册、下单、改资料，本质都是一张表单。 表单最容易出错的地方不在输入框本身，而在边界状态。字段哪些必填、填错了怎么提示、提交中能不能重复点、提交失败后填好的内容还在不在——这几件事没想清楚，表单就会让用户填了一遍又一遍。 还有一层是校验的时机和位置。好的做法是：能立刻判断的错，在离开这个框时就提示；需要在提交时才统一的错（比如「两次密码不一致」），在提交后集中显示。提示要贴着眼看的位置，文案要说出「哪一栏、错在哪、怎么改」，而不是一句空泛的「请检查输入」。

**也叫**：填写表格、表单页、注册表单、那个要填很多格子的页面

## 你可以这样告诉 AI

```text
【范围】只改 [注册页] 的这张表单，不动其他页面和登录逻辑
【字段】昵称（必填，2-12 字）、邮箱（必填，格式校验）、简介（选填）、密码（必填，至少 8 位）
【校验要求】
  - 离开某个框时就校验它的格式，错误要指着这一栏说清楚「哪一栏、错在哪、怎么改」
  - 「密码」和「确认密码」不一致这类跨字段错误，在点提交时再提示
【提交行为】
  - 点提交后按钮禁用并显示「提交中…」，防止重复提交
  - 提交失败时，用户已填的内容必须原样保留，并在对应字段旁标出错误
【边界】不要改配色和页面整体布局；不要新增第三方组件库
【交付】告诉我改了哪些文件、我打开哪个地址、填哪些值能走通一次成功注册，以及哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 按正常顺序填完整张表点提交，真的提交成功了：有明确成功反馈，不是转个圈又回到原样。
- [ ] 故意留空一个必填项再提交：能被拦住，提示指着具体那一栏，文案说清了怎么改。
- [ ] 填一个错误格式的邮箱，离开这个框：立刻出现该栏的格式提示。
- [ ] 提交成功后刷新页面，确认新数据真的存进去了（比如昵称变了），不是只在界面晃一下。
- [ ] 提交过程中按钮变成禁用态；快速连点三次，只产生一条数据。
- [ ] 手机尺寸下所有字段没有挤到看不清，能正常点到每个框。

常见糊弄：
- 「表单已做完」——但提交后刷新，数据根本没存进去，只有个转圈动画。一定自己提交一次再刷新看结果。
- 错误提示只有一句笼统的「请检查输入」，不说是哪一栏——用户得靠猜。要求它指着字段说。
- 校验只在提交时才做，一填错要整张表重来——这不叫表单，叫折磨。要能看到字段级的即时提示。
- 用 placeholder 当标签：一打字标签就消失，用户根本不知道自己刚才那栏要填什么。
- 提交中按钮没禁用，连点三次产生了三条重复数据。

来源：https://mickerbook.com/reference/t/form/