语义与表单

把 HTML 看成浏览器可以执行的交互契约：元素说明“它是什么”，原生行为说明“怎样操作”，表单协议说明“送出什么”。CSS 能改变外观，却不能替标签补齐角色、焦点和提交规则。先建立正确契约，再添加业务交互，通常比用 div 重建一套控件更可靠。

HTML、CSS与可访问性2 道章节练习3 道主练关联

先修知识：无

核心模型

原理与机制

语义同时服务多种输入方式

执行当前页面操作使用 button，跳转地址使用带 href 的 a；标题、列表、导航也应表达真实内容关系。原生按钮包含键盘激活、焦点与禁用行为，div 上的 click 只实现了一条入口，role=button 只是语义声明，不会自动补上 Space、Enter 和禁用规则。图标按钮仍需清晰可访问名称。表单里的辅助按钮显式写 type=button，提交按钮明确写 type=submit，避免外观相似但默认行为不同。

字段名称、值与输入提示分开设计

label 与唯一 id 关联，使字段在填写前后都有稳定名称；placeholder 会消失，只适合辅助提示。name 决定提交字段名，id 主要用于引用。type 表示数据语义及控件行为，inputmode 提示虚拟键盘，autocomplete 表示可自动填充的数据类别。手机号适合 tel，验证码用文本保留前导零，再提示 numeric 键盘与 one-time-code；键盘提示既不限制粘贴，也不是数字合法性保证。

约束校验是一条可观察的交互流程

required、min 等约束提供即时反馈；额外业务错误可用 setCustomValidity 写入，并在恢复合法时传空字符串清除。错误应指出字段、原因和修正方式，并通过描述关系与输入关联，提交失败后可提供错误汇总及合理焦点。不要在用户刚键入半个值时持续报错。requestSubmit 模拟提交者流程，遵循校验配置并触发 submit；submit 方法跳过约束校验及该事件。无效字段可能先阻止 submit，因此不能只在 submit 监听里记录所有提交尝试。

禁用状态与真正的信任边界

原生 disabled 会阻止控件交互，退出顺序焦点，禁用表单控件通常不进入提交数据；aria-disabled 只通知辅助技术，仍需在所有执行入口阻止重复操作。服务端必须独立校验格式、权限和业务约束，因为任何页面限制都可绕过。金额输入还要单独定义币种精度、舍入、范围与本地化解析：step=0.01 约束输入步进，不改变二进制浮点；用最小单位整数或十进制定点方案，显示格式与计算存储分离。

最小示例

html

<form id="verify">
  <label for="otp">六位验证码</label>
  <input id="otp" name="otp" type="text" inputmode="numeric"
    autocomplete="one-time-code" pattern="[0-9]{6}" required
    aria-describedby="otp-help">
  <p id="otp-help">输入六位数字，可以粘贴，保留开头的 0。</p>
  <button type="submit">验证</button>
  <button type="button">重新发送</button>
</form>

输入 001234 后读取 value 仍是字符串 001234；输入五位数字再提交会触发原生无效反馈。辅助按钮不提交表单。这个片段只演示输入契约，没有真实验证码服务；服务端仍要验证匹配、过期与请求权限，不能因六位格式正确就视为验证成功。

环境：支持本章相关特性的现代浏览器；CSS 片段需配合说明中的最小 HTML。

核验：未执行教学示例；说明中的结果为机制推演，不是本轮测试通过记录。

边界与取舍

边界

pointer-events:none 仅阻止部分指针路径，键盘或脚本仍可能执行操作。
autocomplete 是提示，实际填充由浏览器与上下文决定；不要为了设计稿禁用粘贴。
前端 pattern 不等于业务真实性；金额也不能未经字符串精度设计就一律 Number(text)*100。

取舍

保留原生控件可减少键盘与辅助技术实现成本；高度自定义控件需承担完整交互和跨设备测试。
disabled 能直接阻断交互；保留可发现性的 aria-disabled 需要额外的事件、状态与提交防护。

口述示范

我会先按操作、导航和数据语义选原生元素，保证名称、焦点与提交入口一致。再把输入提示、客户端反馈、服务端验证分开，尤其解释 disabled 与 aria-disabled、requestSubmit 与 submit 的差别，最后用键盘、粘贴、无效值和绕过客户端的请求验收。

章节练习

练习 1

假设为 TranslateFlow 增加验证码表单，如何保留前导零并让错误可理解？

展开检查点

文本值而非数字值；label、name、inputmode 与 autocomplete 各司其职。
错误文本关联字段，修正后清空自定义错误；服务端执行最终验证。

提交期间仍希望用户 Tab 到按钮了解状态，应如何改造？