表单Form
你可能会说
帮我做个注册页，用户填完信息点提交那种。
网页或软件里让用户填写并提交一组信息的区域，比如注册、下单或修改资料例如注册账号时，用户会填写手机号、验证码和密码，再点“注册”。填错的内容要在对应输入框附近说明；提交后还要明确账号是否真的创建成功。
容易混淆？这样区分
表单Form≠字段组（Fieldset）
表单（Form）收集并提交整项任务；字段组（Fieldset）只把表单里相互相关的几个字段分成一组，通常会用图例标题（legend）写出组名。
什么时候用
- 登录注册：账号 + 密码 + 提交oil-oil••••••••登录
- 资料设置：一排字段，改完保存姓名林小hu邮箱you@example.com
- 提交前校验：格式不对当场指出邮箱oil-oil@abc✕ 邮箱格式不正确
- 组合多种控件：输入框、选择器、开关混编姓名林小hu城市深圳通知保存
什么时候不用
- 只有独立搜索字段：直接使用 输入框 Input，无需增加表单框架搜索表单输入关键词…提交单个搜索字段不需要额外的表单结构
- 大量字段集中在一页：按任务分组或分步填写
- 校验规则藏起来：提交失败才告诉用户哪错了密码123提交失败：密码至少 8 位规则提前不说，提交才报错
- 只是展示信息：使用 描述列表 Descriptions，不要使用禁用输入框版本v2.4.0作者oil-oil只读信息塞输入框，用户以为能改
组成结构 · Anatomy
✕ 邮箱格式不正确
一个字段的完整单元：标签 + 控件 + 报错
告诉用户这里填什么
真正干活的填写与选择，什么都能放
校验不通过时的提示，紧跟对应字段
提交 / 取消，主按钮放最重要的动作
常见变体 · Variants
水平布局Horizontal
字段较少且页面较宽时，可将标签放在左侧
垂直布局Vertical
字段较多或页面较窄时，将标签放在输入框上方
内联布局Inline
筛选条件需要在同一行提交查询时
校验状态Validation
✕ 邮箱格式不正确
校验失败时，在对应字段附近说明错误原因
典型使用场景
登录注册
登录注册
个人资料设置
新建项目
新建项目
筛选条件组合
订单 #20260721-018已完成¥ 329
订单 #20260721-017进行中¥ 89
延伸阅读 · 权威出处