返回知识库

界面与交互 · 操作与输入

表单Form

收集并提交一组字段,把校验、提交中、成功和失败都做成可见、可恢复的状态。

校验、提交中、成功和失败都长在物件上

表单是一条能恢复的提交路径。先在面板里把字段错误、提交中、成功和失败都操作出来——结果挂在字段下和提交物件上,而不只是底部一句提示。

场景:活动报名表。填字段、触发校验,看字段错误物件;提交看提交物件从提交中变成已提交或失败可重试;切换模拟成功 / 失败。

未提交填好后点「提交报名」

对照:填好姓名、邮箱、手机后点「提交报名」。原因:表单先校验字段,错误物件贴在字段下;再走提交中到成功或失败。下一步:先留空一个字段提交,看字段错误物件;再填全、切到「模拟失败」,看提交物件挂失败可重试。

做表单时要盯这些

实验台证明的是机制;真正写表单时,用这五条检查边界。

  1. 字段错误贴在字段下,且有文字每个字段挂自己的错误说明,说明「哪里不对、怎样修好」;不能只用红框表达错误,读屏和色弱用户都看不到。
  2. 提交中防重复点提交后按钮立刻禁用并显示「提交中」,避免慢网络下用户连点造成重复报名、重复下单。
  3. 成功结果可观察成功要在物件上明确呈现(报名编号、订单号、下一步入口),不能静默关闭表单让用户怀疑没提交上。
  4. 失败保留内容并给重试网络失败不清空表单:已填字段仍在,提交物件挂「失败·可重试」,用户可以直接重试,不必从头再填。
  5. 标签、焦点和读屏都要到字段每个字段有持续可见的 label 和必填标识;用 aria-invalid、aria-describedby 把错误接到字段上;焦点环清晰可达,键盘能完成整条提交。

什么时候用表单,什么时候换别的

判断依据是「要采集几项结构化字段、提交是否改变状态」。

适用多项结构化字段一起提交

报名、注册、下单、反馈:要采集姓名、邮箱、手机等多项字段并整体提交,才用表单包起来。

适用提交会改变状态、需要反馈

提交后产生报名、订单或修改:需要校验、提交中、成功 / 失败这条完整路径,表单负责承接。

换控件单个布尔切换

开 / 关通知、明暗模式用开关或复选框,不必套一层 form;表单的提交和校验在这里是负担。

换控件少量固定选项的单选

三五个固定项用单选框或选择器更直接;放进表单只是让用户多点一次提交。

怎么用:从字段到提交结果的最短路径

让字段、错误、提交状态和结果都挂在同一张表单上,鼠标、键盘和读屏都能完成。

  1. 用 label 包住每个字段并标必填;input 上接 name、autoComplete 和 type,让浏览器和读屏能正确识别。
  2. 写清楚每个字段的校验规则(必填、格式、长度);提交时一次性把错误挂在对应字段下,文字说明怎么改。
  3. 提交处理先防重复(按钮禁用 + 提交中状态),再发请求;请求期间允许用户继续看到已填内容。
  4. 成功在物件上给出结果(编号、订单、下一步);失败保留字段内容,提交物件挂「可重试」,不让用户重填。
  5. 整条路径键盘可达:Tab 进字段、Enter 提交、错误用 aria-live 播报;焦点环清晰可见。

正反例:同一次提交失败,只改恢复方式

目标都是把报名交上去。差别只在「失败后表单怎么做」。

正例失败保留内容,物件挂「可重试」

网络失败后,姓名、邮箱、手机仍在字段里;提交物件挂「失败·网络异常·可重试」,按钮变成「重试提交」。用户直接重试,不用重填。

这么做
反例失败清空表单并静默关闭

失败后字段被清空、页面跳回空白,没有结果物件也没有提示。用户既不知道刚才是否提交成功,又得把整张表重新填一遍,多半会放弃。

别这么省

快速自测

报名请求遇到网络失败后,表单最重要的行为是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。