---
url: /mobile/data-entry.md
---
# 数据录入

移动端表单的三条铁律：**标签上置**（`label-position="top"`，窄屏上左右结构会让输入区不足 200px）、**能选不输**（枚举字段一律底部选择面板，日期用面板点选，自由文本只留给「事由 / 备注」）、**主按钮吸底**（拇指收势位置，见[布局与导航壳](/mobile/layout)）。

## 表单页范式

下方演示覆盖了移动表单的四种典型控件：分段选择（互斥枚举）、底部选择面板（引用型字段）、日期快捷面板、多行文本。表单较长时内容区滚动，提交栏始终吸底。

要点：

* **底部选择面板替代下拉 popper**。Select / Cascader / DatePicker 的弹出层在触屏上的正确形态是底部面板（`Drawer direction="btt"`）：选项纵向排布、点选即关、拇指可达。高频日期字段先给「今天 / 昨天 / 本周」快捷项，精确日期再进完整日历。
* **键盘类型跟字段走**。金额字段声明 `inputmode="decimal"` 唤起数字键盘，减少切换成本；`enterkeyhint` 按表单流向声明（下一项 / 完成）。
* **校验时机**。文本类字段失焦即校验（`blur`），选择类字段选中即校验（`change`）；错误内联在字段下方，不用弹窗报错。

## 列表筛选

桌面 SearchFilter 的多行筛选表单在移动端压缩为两段：**搜索框 + 分段器**直接外露（覆盖 80% 的筛选诉求），其余条件收进「筛选」底部面板。筛选状态变化即时生效，不需要「查询」按钮。

结果计数常驻（「共 N 条」），让筛选反馈可感知；空结果给引导文案而不是白屏（见 [Empty](/components/empty)）。