界面图鉴
表单Form
你可能会问
表单到底是什么？为什么填表单的地方总是最容易流失用户？
简单来说
一组输入项加一个提交按钮，把用户手里的信息收进系统。
01 · 拆开看看
这一块由什么组成
它是网页里唯一「用户向系统交东西」的零件：每项输入配着名字和提示，最后由提交按钮一次交付。它通常由这几部分组成：
标签Label
这一格要填什么，写在输入框上方或左侧。
输入框Input
真正接收内容的地方：文本、密码、下拉都算。
校验提示Hint
格式要求和填错时的红字，就近出现。
提交按钮Submit
一次交付所有内容，通常只有一个。
02 · 常见变体
同一个零件，几种摆法
从上到下一列填完，最不容易漏。
长表单拆成几步，每步只问一点。
一行搞定：输入框加按钮，订阅框常用。
03 · 火眼金睛
这个页面里，哪一块是表单？
有输入框不一定是表单——看它收几样东西、交给谁。
点一块试试，看看它叫什么
表单Form
就是它！多个带标签的输入项加一个提交按钮，一次交付。
搜索框Search
不是它。单个输入框加放大镜是搜索框——表单的近亲，但只收一个词。
行动区块CTA
不是它。只有按钮没有输入项，这是行动召唤，不收集信息。
04 · 用与不用
什么时候该上它
适合
- 注册、登录、下单这类收集信息的场景
- 设置页——每一项都是微型表单
- 组合条件的筛选器
先别用
- 只收一个词——一个搜索框就够了
- 能自动获取的信息，别再开口问用户
- 想把问卷调查塞进注册流程的时候
05 · 想一想
一道题，检查眼力
注册表单有 9 个字段，一半用户填到中途就放弃了。最有效的改进是？
对。每个字段都是流失点——先做减法，减不动了再分步。
用户不是找不到按钮，是不想填这么多。按钮再大也救不了九个字段。
文案劝不动嫌麻烦的人。减少麻烦本身才是解法。
06 · 说给 AI 听
让 AI 改它时，这样说
校验规则说得越具体（什么格式、什么时机提示），AI 做出来的表单越省心。
注册表单只留邮箱和密码，其他信息注册后再补
邮箱输入框加格式校验，错了在输入框下方红字提示
提交时按钮变灰并显示加载中，防止重复提交
表单报错别用弹窗，就在对应输入框下面提示
最容易踩的坑
表单是流失的重灾区：每多一个字段就劝退一批人。加字段前先问一句——这项现在真的必须要吗？