第 18 课：关联输入框与校验说明

日期：2026-09-23
课程序号：第 18 课
知识点：aria-describedby 关联字段说明

用途或适用场景

让浏览器约束校验中的时长输入框与页面上的范围说明形成可识别的关联。

核心概念

aria-describedby 指向同一页面中说明元素的唯一 id；它补充输入框的说明，不替代 label 或浏览器的 reportValidity()。

最小代码或操作示例

html

<form id="lessonForm" novalidate>
  <label for="minutes">练习分钟数</label>
  <input id="minutes" name="minutes" type="number" min="1" required
         aria-describedby="minutes-help">
  <p id="minutes-help">请输入至少 1 分钟。</p>
  <button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#lessonForm');
form.addEventListener('submit', event => {
  if (!form.reportValidity()) event.preventDefault();
});
</script>

3～5 分钟练习

输入 0 并提交，检查说明元素的 id 是否与输入框的 aria-describedby 一致。

参考答案

两处均为 minutes-help；浏览器继续报告无效输入，辅助技术可关联读取范围说明。

与上一课的联系

沿用第 17 课的 lessonForm、minutes、name 与 reportValidity()；本课只新增字段标签与范围说明的关联；完成后下一课可在提交失败时标记输入框的错误状态。

时效校验

时效校验：2026-09-24（WHATWG HTML Living Standard 约束校验；W3C WAI ARIA1 当前技术页，未见本课用法的废弃说明）。