术语图鉴/前端基础/表单
←→切换Esc返回

表单 Form

你可能会说

帮我做一个注册表单,有邮箱、密码、确认密码,要实时校验格式。

表单是网页收集用户输入的标准方式——输入框、下拉框、复选框、提交按钮的组合。

页面上收集用户输入的区域——输入框、下拉选择、单选多选、提交按钮的组合。登录、注册、搜索都是表单。

也常被叫作Form

生活类比

像纸质表格——填好姓名、电话、地址,最后签字(点提交)交上去。

🎮 动手试试

👇 输入内容查看实时校验效果

选择题选择一个你认为最合适的答案

关于「表单」,以下哪个描述最准确?

你可以这样告诉 AI

帮我做一个注册表单:邮箱(格式校验)、密码(至少8位+数字)、确认密码(一致性校验),实时显示错误提示,提交时 loading 状态。

容易混淆?这样区分

表单 Form≠
搜索框 Search Input

搜索框是单一输入的简化表单,完整表单通常有多个字段 + 校验 + 提交流程。

表单 Form≠
Modal 表单 Dialog Form

表单是内容结构,Modal 是展示容器。表单可以放在 Modal 里,也可以独立存在。

什么时候用

收集用户输入

登录注册、搜索、问卷、订单填写等任何需要用户提交数据的场景,表单是标准方案。

和 AI 协作时

想让 AI 做表单时,直接说「帮我写一个注册表单,有邮箱和密码,实时校验、错误提示、提交 loading」。

什么时候不用

只读展示

用户只需浏览内容不需要输入时(如文章页、数据看板),表单是多余的界面噪音。

与用户输入无关的项目

纯后端接口、定时任务、脚本处理等不需要前端表单。

组成结构 · Anatomy

1
核心概念Core

页面上收集用户输入的区域——输入框、下拉选择、单选多选、提交按钮的组合。登录、注册、搜索都是表单。

2
实际表现In Practice

像纸质表格——填好姓名、电话、地址,最后签字(点提交)交上去。

3
与 AI 的关联AI Context

和 AI 沟通时提到「做个注册表单,有邮箱和密码输入框」,描述的就是 Form。

典型使用场景

注册表单验证
告诉 AI「帮我写一个注册表单:手机号格式校验、密码至少 8 位含数字、两次密码一致,错误时在输入框下方显示红色提示」
想弄懂概念时
告诉 AI「用大白话给我解释什么是表单,举个生活中的例子」

延伸阅读