可访问的学习计划表单

这段代码解决什么问题

显式 label for 与输入框的 id 配对。aria-describedby 同时关联补充说明和本字段错误，aria-invalid 只在检验失败后设置。

按钮为 type="button"，脚本阻止 form 的默认提交事件；不会构造网络请求。检验不通过时，焦点移到可聚焦的错误摘要，摘要中的普通链接可回到具体字段。通过时只更新预览文字和状态信息。

• 昵称只去除首尾空白，不把用户输入当 HTML 执行。
• 分钟数用 Number 转数值，并检查范围、整数与步长。
• 原生 required、min、max、step 保留为字段语义；本例显示自定义错误，不宣称覆盖所有输入法和浏览器差异。
• 接入真正预约时，服务器仍须独立验证、处理授权和存储，前端预览不能替代这些流程。

关键片段

<label for="minutes">计划时长</label>
<input id="minutes" type="number" min="10" max="120"
  step="10" aria-describedby="minutes-help minutes-error">
// 数值比较，不比较输入字符串
const n = Number(minutes.value);
const valid = minutes.value.trim() !== "" &&
  Number.isInteger(n) && n >= 10 && n <= 120 && n % 10 === 0;

这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。

运行条件与源文件

解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 accessible-form.html。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。

关闭 JavaScript 仍可阅读本文和初始示例内容；动态操作按钮保留禁用状态或静态内容，不表示已运行交互。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。

本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。查看完整 MIT 许可 · 运行说明

进一步阅读

以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。

• W3C WAI：关联表单标签（在线参考，访问需网络）
• W3C WAI：表单通知与错误（在线参考，访问需网络）
• MDN：约束验证（在线参考，访问需网络）