form-design

表单设计

表单是用户向产品提交数据的地方。用户完成表单时遇到的每一个不必要的障碍，都是设计上的失败。设计目标是在用户提交之前，让正确输入变得轻松，让错误输入一目了然。

---

三层引导

每一层都有不同的作用。不要将它们混为一谈。

第 1 层——辅助文本

说明要输入什么。显示在输入框下方，始终可见，使用较小的次要文本。

Email address
[                              ]
Use the email you signed up with.

• 站在用户的角度，用通俗易懂的语言撰写
• 控制在一句话内——如果需要更多说明，说明字段过于复杂或命名不当
• 不要重复标签内容（标签写着“电子邮件”，下方再写“输入电子邮件”就是多余的）
• 辅助文本不能替代标签——仍然必须提供标签

第 2 层——占位文本

显示格式或示例值。位于输入框内，输入时消失。

[[email protected]              ]

• 使用真实的示例，而不是描述：+358 40 123 4567，而不是 输入电话号码
• 绝不要用占位文本代替标签——占位文本会消失，导致用户失去上下文
• 使用灰色（--color-text-secondary），并确保颜色比实际输入文本更浅
• 可选——并非每个字段都需要占位文本

第 3 层——验证

确认输入是否正确。这是最重要的一层。

Email address
[jane@           ] ← invalid
✗ Enter a valid email address.

验证时机：

• 失焦时（离开字段时）：大多数字段的默认方式——在用户完成输入后进行验证
• 实时（输入时）：用于格式复杂或容易出错的字段，例如密码强度、IBAN、VAT 编号、URL 和大量使用正则表达式的字段
• 提交时：检查遗漏项，并滚动到第一个错误处

实时验证在开始时必须宽容——不要在用户刚开始输入时立刻显示错误。应在短暂延迟（300–500ms）后显示，或在用户输入第一个能明确判定输入错误的字符后显示。

---

提交按钮状态

表单有效时，启用提交按钮。这是表单设计中最明确的操作提示之一——用户能看到目标，并知道何时已达到目标。

[Submit]   ← disabled, low contrast, cursor: not-allowed
           (fields incomplete or invalid)

[Submit]   ← enabled, full colour, cursor: pointer
           (all required fields valid)

实现：

<button type="submit" disabled={!isFormValid}>Submit</button>

对于不适合实时验证的长表单或复杂表单，不要禁用提交按钮——应在提交时验证，并滚动到错误处。长表单中的禁用提交按钮会让用户感到沮丧，因为他们无法判断还缺少什么。

提交时的加载状态： 将标签替换为旋转指示器，并禁用按钮。防止重复提交。

---

字段结构

[Label]                           [Optional badge if optional]
[Input field                                                  ]
[Helper text — what to enter, format, constraints            ]
[Error message — appears below helper text on validation fail ]

<div class="field">
  <label for="vat">VAT number <span class="optional">Optional</span></label>
  <input
    id="vat"
    type="text"
    placeholder="FI12345678"
    aria-describedby="vat-helper vat-error"
    aria-invalid="true"
  >
  <p id="vat-helper" class="helper-text">Finnish VAT numbers start with FI followed by 8 digits.</p>
  <p id="vat-error" class="error-text" role="alert">Enter a valid Finnish VAT number (e.g. FI12345678).</p>
</div>

---

必填与选填

标记数量较少的一类。如果大多数字段都是必填项，就标记选填项。如果大多数字段都是选填项，就标记必填项。

• 不要只依赖颜色——添加文本标签（“必填”或带说明的星号）
• 将必填／选填标记放在标签中，而不只是放在占位文本或辅助文本中

<label>Email <abbr title="Required">*</abbr></label>

<label>Phone <span class="badge">Optional</span></label>

---

使用 Fieldset 分组

相关字段应放在带有 <legend> 的 <fieldset> 中。这是语义化 HTML，有助于屏幕阅读器播报分组上下文。

<fieldset>
  <legend>Billing address</legend>
  <label>Street</label><input type="text">
  <label>City</label><input type="text">
  <label>Postal code</label><input type="text">
</fieldset>

以下情况应使用 fieldset：

• 地址分组
• 付款详情
• 单选按钮组
• 复选框组

---

输入类型

使用正确的 type——浏览器可免费提供验证、适用的键盘和自动填充功能。

数据	输入类型
电子邮件	type="email"
电话	type="tel"
URL	type="url"
数字	type="number"
密码	type="password"
日期	type="date"
搜索	type="search"
颜色	type="color"

在移动设备上，type="email" 会显示电子邮件键盘，type="tel" 会显示数字键盘。这些都是免费的用户体验改进。

---

自动填充支持

允许浏览器自动填充。除非有安全要求，否则不要禁用此功能。

<input type="text"  autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel"   autocomplete="tel">
<input type="text"  autocomplete="street-address">
<input type="text"  autocomplete="postal-code">
<input type="text"  autocomplete="cc-number">    
<input type="password" autocomplete="new-password">

正确的 autocomplete 值能显著减少回访用户和移动设备用户的操作阻碍。

---

依赖数量的文案

任何措辞依赖数字的字符串，都应通过消息目录处理，并将数量作为命名占位符。不要在视图中使用 count === 1 分支。这个三元表达式硬编码了三条英语规则：只有两种复数形式、在 1 处分界、数字放在名词前。芬兰语会使名词变格，其他语言可能有三种或更多形式，或者把数量放在后面。翻译之前，这个问题不易察觉；翻译之后，它就会扩散到每个视图中。

翻译 UI 文案会让所有基于文本的测试选择器都依赖于语言区域设置。请在同一次更改中固定测试设置中的语言区域。

---

审查清单

• 每个字段都有可见标签（不只是占位符）
• 辅助文本位于输入框下方，并说明要输入什么
• 占位符展示格式或示例，而非描述
• 简单字段在失焦时触发验证，复杂字段实时验证
• 错误消息紧邻出错的字段
• 错误消息通过 aria-describedby 关联
• 只在少数需要标记的字段上标注必填/选填
• 表单无效时禁用提交按钮（适用于短表单）
• 提交按钮显示加载状态，并防止重复提交
• 相关字段使用 <fieldset> 和 <legend> 分组
• 所有输入框都设置了正确的 type 属性
• 地址、联系信息和支付字段设置了 autocomplete 属性
• 依赖数量的文案通过消息目录处理，并将数量作为占位符；绝不使用单数/其他形式的三元表达式
• 按文本选择内容的测试会固定语言区域