展现形式 · 概念
Inline Form:在当前语境中直接提交
Inline Form 适合邮件订阅等少字段短任务;本文说明字段与标签要求、验证反馈、失败恢复,以及何时应改用独立页面流程。
Inline Form 把一个短小任务直接放在当前内容语境中,让用户无需进入新页面或对话框即可输入并提交。常见例子包括邮件订阅、邮编检查和单字段查询;它不是把完整账户、结账或支持流程压缩进页面角落。
适合与不适合
适合字段很少、目的单一、提交结果能在原位置清楚反馈的低复杂度任务。不适合多步骤、敏感信息、需要大量说明、复杂错误恢复或用户可能希望保存并稍后继续的流程。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 在意图最强的语境中直接完成行动 | 会打断阅读并占用页面空间 |
| 减少跳转和额外页面加载 | 字段一多就迅速变得拥挤 |
| 适合即时展示局部结果 | 异步错误和成功状态容易不被感知 |
| 可作为渐进增强的简单入口 | 多处重复表单会增加维护和隐私风险 |
字段与说明要求
只询问完成当前任务必需的信息。每个控件都有可见且关联正确的标签,placeholder 只提供示例,不代替标签。提交前说明用途、必要条件和相关隐私边界;按钮文案描述实际动作,不统一写“提交”。
验证与无障碍
错误信息指出具体字段、问题和修正方法,并与字段关联;不能只用红色表示错误。异步提交后明确通知成功或失败,失败时保留用户已输入的有效内容。键盘顺序应跟随视觉顺序,提交期间防止重复操作但保持状态可感知。
状态与退化
表单至少处理初始、填写、提交中、成功、字段错误、系统错误和重试状态。JavaScript 不可用时使用标准表单提交与结果页面;服务不可用时说明替代路径。字段增加到需要分组或阶段时,迁移到独立页面流程。
发布前检查
- 每个字段是否都是完成当前任务所必需?
- 标签、格式、必填和用途是否在输入前可理解?
- 成功、字段错误和系统错误是否明确区分?
- 失败后是否保留有效输入并允许重试?
- 无 JavaScript 时是否仍能提交或获得替代路径?