freeCodeCamp问卷项目HTML5数字输入框非数字及范围校验不生效怎么办

• 核心原因：所有表单控件未包裹在<form>标签中，HTML5原生验证逻辑仅会在<form>元素的提交动作触发时执行，缺少<form>标签时点提交按钮不会触发任何原生校验规则。
• 次要问题：存在ID重复错误，<label>标签和<input>标签都设置了id="number"，HTML中ID属性必须全局唯一；同时<label>的for属性值为age，和输入框的ID不匹配，会导致点击label无法自动聚焦到对应输入框。
• 补充：number类型输入框的pattern属性是无效配置，number类型的校验规则由min/max/step属性控制，pattern仅对text、search、url、tel、email、password类型的输入框生效，配置后也不会起作用。

<!-- 必须添加form标签包裹所有表单控件 -->
<form>
  <label for="age">Age</label>
  <!-- 修正ID为age，和label的for属性匹配，添加required属性确保空值也会触发校验 -->
  <input type="number" id="age" min="14" max="99" required>
  <input type="submit" value="Submit">
</form>

• 输入非数字内容时，失焦或提交表单时会触发「请输入一个数字」的原生提示
• 输入数字小于14或大于99时，提交时会触发「值必须大于等于14/小于等于99」的原生提示
• 留空提交时会触发「请填写此字段」的原生提示

内容的提问来源于stack exchange，提问作者tonyyyy_13