第 17 课：为时长字段指定提交名称

日期：2026-09-22
课程序号：第 17 课
知识点：表单控件的 name

用途或适用场景

让通过校验的时长值作为表单数据提交。

核心概念

id 用于页面内定位控件；name 是表单提交数据的键。只有 id 而没有 name 时，该输入值不会成为对应的提交键值。

最小代码或操作示例

html

<form id="lessonForm" novalidate>
  <input id="minutes" name="minutes" type="number" min="1" required>
  <button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#lessonForm');
form.addEventListener('submit', event => {
  if (!form.reportValidity()) event.preventDefault();
});
</script>

3～5 分钟练习

输入 5，在开发者工具网络面板查看提交字段名。

参考答案

提交数据以 minutes 为键、5 为值；若删去 name，该键不会随表单发送。

与上一课的联系

沿用第 16 课的 lessonForm、minutes 和 reportValidity()；本课只为输入框新增 name；完成后下一课可为同一字段增加可读的标签与范围说明。

时效校验

时效校验：2026-09-24（WHATWG HTML Living Standard 表单控件与约束校验；name、reportValidity 未见废弃标记）。