一、开篇：B端表单到底是什么？
表单是B端产品核心数据录入载体，本质是把线下纸质单据搬到线上，适配电脑/移动端操作习惯。核心目标：降低填写成本、减少错误、提升效率、提高完成率。
二、表单三大设计原则
-
表意明确：用对组件：日期用DatePicker、数字用InputNumber，不混用、不误导。
-
简洁高效：信息获取快、录入操作快；视觉清爽，不堆砌。
-
安全容错：操作前：清晰提示输入规则；操作中：实时校验、自动纠错；操作后：草稿保存、二次确认防误操作。
三、表单基础构成（必掌握）
基础表单 = 标签 + 表单域 + 提示信息 + 操作按钮；高阶表单 = 基础 + 校验提示/帮助提示/占位符/动态增减。
1. 标签布局（4种，效率排序）
效率：顶对齐 ＞ 右对齐 ＞ 左对齐 ＞ 内部标签
-
顶对齐标签：速度最快（50ms定位）、浏览填写双快、省横向、占纵向。✅ 适用：追求快速填写、标签长短不一、延展性要求高。
-
右对齐标签：填写快、省纵向、阅读稍慢。✅ 适用：要屏效+要速度，标签长度差异小。
-
左对齐标签：阅读稳、填写慢、省纵向。✅ 适用：复杂/敏感信息、需要用户仔细核对（如注册）。
- 内部标签：省空间、输入后消失易遗忘。✅ 适用：移动端极简表单（≤2项），不建议PC端大量使用。
2. 必填/选填标记规则（统一最关键）
3. 表单域（输入核心）
包含：输入框、选择器、时间选择器、数值选择器、上传。
设计要点：
4. 操作按钮
四、表单4种布局类型
-
基础表单：表单项≤7个、结构简单，直接单列/双列排布。
-
锚点定位表单：内容极多、纵向超长、各组强关联，用锚点快速跳转。
-
标签页（Tab）表单：内容多、各组
无强关联，用Tab分组隔离。
-
分步（Steps）表单：有
先后逻辑顺序，给用户进度预期。
五、表单5种交互形式（按内容量排序）
内容由少到多：气泡卡片 → 原位编辑 → 弹窗 → 抽屉 → 页面跳转
-
气泡卡片 Popover：轻描述、轻操作，不打断流程。
-
原位编辑：展示即编辑，回车保存，极简录入。
-
弹窗 Modal：不离开当前页，承载简单表单。
-
抽屉 Drawer：侧边滑入，可多层，适合中量内容。
-
