一、開篇：B端表單到底是什么？
表單是B端產品核心數據錄入載體，本質是把線下紙質單據搬到線上，適配電腦/移動端操作習慣。核心目標：降低填寫成本、減少錯誤、提升效率、提高完成率。
二、表單三大設計原則
-
表意明確：用對組件：日期用DatePicker、數字用InputNumber，不混用、不誤導。
-
簡潔高效：信息獲取快、錄入操作快；視覺清爽，不堆砌。
-
安全容錯：操作前：清晰提示輸入規則；操作中：實時校驗、自動糾錯；操作后：草稿保存、二次確認防誤操作。
三、表單基礎構成（必掌握）
基礎表單 = 標簽 + 表單域 + 提示信息 + 操作按鈕；高階表單 = 基礎 + 校驗提示/幫助提示/占位符/動態增減。
1. 標簽布局（4種，效率排序）
效率：頂對齊 ＞ 右對齊 ＞ 左對齊 ＞ 內部標簽
-
頂對齊標簽：速度最快（50ms定位）、瀏覽填寫雙快、省橫向、占縱向。? 適用：追求快速填寫、標簽長短不一、延展性要求高。
-
右對齊標簽：填寫快、省縱向、閱讀稍慢。? 適用：要屏效+要速度，標簽長度差異小。
-
左對齊標簽：閱讀穩、填寫慢、省縱向。? 適用：復雜/敏感信息、需要用戶仔細核對（如注冊）。
- 內部標簽：省空間、輸入后消失易遺忘。? 適用：移動端極簡表單（≤2項），不建議PC端大量使用。
2. 必填/選填標記規則（統一最關鍵）
3. 表單域（輸入核心）
包含：輸入框、選擇器、時間選擇器、數值選擇器、上傳。
設計要點：
4. 操作按鈕
四、表單4種布局類型
-
基礎表單：表單項≤7個、結構簡單，直接單列/雙列排布。
-
錨點定位表單：內容極多、縱向超長、各組強關聯，用錨點快速跳轉。
-
標簽頁（Tab）表單：內容多、各組
無強關聯，用Tab分組隔離。
-
分步（Steps）表單：有
先后邏輯順序，給用戶進度預期。
五、表單5種交互形式（按內容量排序）
內容由少到多：氣泡卡片 → 原位編輯 → 彈窗 → 抽屜 → 頁面跳轉
-
氣泡卡片 Popover：輕描述、輕操作，不打斷流程。
-
原位編輯：展示即編輯，回車保存，極簡錄入。
-
彈窗 Modal：不離開當前頁，承載簡單表單。
-
抽屜 Drawer：側邊滑入，可多層，適合中量內容。
-
