表单页

表单是这套系统里惯例占比最高的地方。第三层仲裁规则说得很直白：表单就是表单，可用性在这里不可妥协。

三种布局

默认是纵向堆叠——标签在控件上方。这是移动端唯一合理的选择，也是桌面端的安全默认，因为标签长度不受列宽限制。

页面原型 E · 提交表单应用轨 · HTML 预览

查看代码 · Source

<form class="wx-form">
  <fieldset class="wx-form__section">
    <legend class="wx-form__legend">基本信息
      <span class="wx-form__legend-hint">用于生成署名与联系方式</span>
    </legend>
    <div class="wx-form__row">
      <label class="wx-field">
        <span class="wx-field__label">姓名 <span class="wx-field__required">必填</span></span>
        <input class="wx-input" name="name" required>
      </label>
      <label class="wx-field">
        <span class="wx-field__label">称谓</span>
        <span class="wx-select-wrap">
          <select class="wx-select" name="title">
            <option>编辑</option><option>设计</option><option>工程</option>
          </select>
        </span>
      </label>
    </div>
    <label class="wx-field">
      <span class="wx-field__label">邮箱 <span class="wx-field__required">必填</span></span>
      <input class="wx-input" name="email" type="email" required aria-describedby="email-hint">
      <span class="wx-field__hint" id="email-hint">仅用于通知，不会公开。</span>
    </label>
  </fieldset>
  <div class="wx-form__actions">
    <span class="wx-form__actions-note">草稿会自动保存。</span>
    <button class="wx-btn" type="button">取消</button>
    <button class="wx-btn wx-btn--primary" type="submit">提交</button>
  </div>
</form>

横向布局用于字段少、标签短、需要紧凑的场景。加 wx-form--horizontal，窄画布下自动退回堆叠——8rem 的标签列和 20rem 的视口无法同时成立。

查看代码 · Source

<form class="wx-form wx-form--horizontal">
  <label class="wx-field">
    <span class="wx-field__label">标题</span>
    <input class="wx-input" name="t">
  </label>
  <label class="wx-field">
    <span class="wx-field__label">标签</span>
    <input class="wx-input" name="tags">
  </label>
</form>

行内布局 wx-form--inline 用于筛选栏与搜索行。

查看代码 · Source

<form class="wx-form wx-form--inline">
  <label class="wx-field">
    <span class="wx-field__label">关键词</span>
    <input class="wx-input" type="search" name="q">
  </label>
  <label class="wx-field">
    <span class="wx-field__label">年份</span>
    <input class="wx-number" type="number" name="year" value="2026">
  </label>
  <button class="wx-btn" type="submit">筛选</button>
</form>

校验：什么时候提示

时机	做法	理由
输入中	不提示	还没写完就报错是骚扰
失焦时	提示该字段	读者已表达"这个填完了"
提交时	汇总 + 聚焦第一个错误	长表单里 40 行外的内联错误没人找得到
修正后	立即撤销提示	正确了还在报错会摧毁信任

错误的三重编码

错误状态同时由颜色、文字和边框粗细承载。只有颜色的错误对色盲用户等于不存在，这是第一层底线，不是建议。

查看代码 · Source

<form class="wx-form">
  <div class="wx-form__errors" role="alert" tabindex="-1">
    <span class="wx-form__errors-title">有 2 处需要修正</span>
    <ol>
      <li><a href="#f-email">邮箱格式不正确</a></li>
      <li><a href="#f-pass">密码至少 8 位</a></li>
    </ol>
  </div>
  <label class="wx-field">
    <span class="wx-field__label">邮箱</span>
    <input class="wx-input" id="f-email" value="zopiya@" aria-invalid="true" aria-describedby="e-email">
    <span class="wx-field__error" id="e-email">邮箱格式不正确——缺少域名部分。</span>
  </label>
  <label class="wx-field">
    <span class="wx-field__label">密码</span>
    <input class="wx-input" id="f-pass" type="password" value="123" aria-invalid="true" aria-describedby="e-pass">
    <span class="wx-field__error" id="e-pass">密码至少 8 位，当前 3 位。</span>
  </label>
</form>

错误文案要说怎么修，不只说错了。"密码至少 8 位，当前 3 位" 比"密码无效"有用得多。

必填标记

用词标记必填，不用裸星号，也不用颜色。星号是约定俗成但不自解释，读屏器读作"星"。如果表单里绝大多数字段必填，反过来标记"选填"更省。

提交状态

没有 spinner。提交中的反馈是按钮文案变化 + 禁用，完成后用 toast 确认。文字比转圈提供更多信息。

提交中时，同一个按钮改写为“正在提交…”，并设为 disabled；真实请求完成后才显示 toast。这个静态示例不伪造网络过程。

查看代码 · Source

<div class="wx-cluster">
  <button class="wx-btn wx-btn--primary" type="button">提交</button>
</div>
<p class="wx-field__hint">提交中时，同一个按钮改写为“正在提交…”，并设为 <code>disabled</code>；真实请求完成后才显示 toast。这个静态示例不伪造网络过程。</p>

表单检查清单

每个控件都有 <label>——placeholder 不是标签
错误用 aria-invalid + aria-describedby 关联
错误汇总用 role="alert" 且可聚焦
触控目标 ≥ 24px（移动端 44/48）
每视图至多一个填充主按钮
提交按钮在最后，取消在它之前
禁用态不能只靠颜色区分