EN
展现形式 · 概念

Inline Form:在当前语境中直接提交

Inline Form 适合邮件订阅等少字段短任务;本文说明字段与标签要求、验证反馈、失败恢复,以及何时应改用独立页面流程。

Inline Form 把一个短小任务直接放在当前内容语境中,让用户无需进入新页面或对话框即可输入并提交。常见例子包括邮件订阅、邮编检查和单字段查询;它不是把完整账户、结账或支持流程压缩进页面角落。

适合与不适合

适合字段很少、目的单一、提交结果能在原位置清楚反馈的低复杂度任务。不适合多步骤、敏感信息、需要大量说明、复杂错误恢复或用户可能希望保存并稍后继续的流程。

优点与缺点

优点缺点
在意图最强的语境中直接完成行动会打断阅读并占用页面空间
减少跳转和额外页面加载字段一多就迅速变得拥挤
适合即时展示局部结果异步错误和成功状态容易不被感知
可作为渐进增强的简单入口多处重复表单会增加维护和隐私风险

字段与说明要求

只询问完成当前任务必需的信息。每个控件都有可见且关联正确的标签,placeholder 只提供示例,不代替标签。提交前说明用途、必要条件和相关隐私边界;按钮文案描述实际动作,不统一写“提交”。

验证与无障碍

错误信息指出具体字段、问题和修正方法,并与字段关联;不能只用红色表示错误。异步提交后明确通知成功或失败,失败时保留用户已输入的有效内容。键盘顺序应跟随视觉顺序,提交期间防止重复操作但保持状态可感知。

状态与退化

表单至少处理初始、填写、提交中、成功、字段错误、系统错误和重试状态。JavaScript 不可用时使用标准表单提交与结果页面;服务不可用时说明替代路径。字段增加到需要分组或阶段时,迁移到独立页面流程。

发布前检查

  • 每个字段是否都是完成当前任务所必需?
  • 标签、格式、必填和用途是否在输入前可理解?
  • 成功、字段错误和系统错误是否明确区分?
  • 失败后是否保留有效输入并允许重试?
  • 无 JavaScript 时是否仍能提交或获得替代路径?