Form 表单
Form 表单就是产品对用户说:“请把这几件事告诉我,我才能帮你完成下一步。”它不是 Excel 表格,也不是几个输入框的堆叠。
关键结构图
用自己的话表达讲给别人听卡住补理解
重新讲一遍
左边是用户意图,中间是字段组和提交按钮,右边是系统处理结果和下一步反馈。
What
Form 表单是产品收集用户输入、完成提交并触发下一步流程的结构。
Form 表单是页面或产品中收集用户输入、完成提交和触发后续流程的网页 / UI 设计组件。它通常由输入项、标签、说明、校验、错误提示、提交入口和提交后的反馈组成。
StructureForm = 输入项 + 标签说明 + 校验反馈 + 提交结果
When
当用户需要报名、订阅、搜索、申请、设置账号、提交资料或完成购买时,需要表单承接输入。
How
先明确用户为什么要填,再减少字段数量,给每个字段清楚标签和帮助文本。提交前后都要处理校验、错误、loading、成功反馈和下一步。
Examples
课程报名表收集姓名、邮箱和课程选择。用户提交后看到成功反馈和下一步安排,这才是完整表单体验。
搜索筛选也是表单的一种。关键词、分类和价格区间都是输入,提交后系统返回筛选结果。
来源
类型:技术文档 / 设计系统实践
事实线:HTML form 是网页中提交用户输入的语义元素;USWDS Form guidance 将表单视为需要标签、帮助文本、验证和错误反馈配合的组件实践。
依据:MDN HTML form 文档、USWDS Form guidance、WCAG Error Identification。
边界:适用于网页和产品里的输入提交流程;不等于普通数据表、Excel 表格或静态信息卡。
常见误读:不要把表单理解成“多放几个输入框”。标签、帮助文本、错误、提交状态和信任感同样重要。