表单提交失败、输入校验失效、label点击无效、select多选值获取错误等问题，根源常在于HTML属性错配、事件拦截未补发、原生API误用等细节疏漏，需逐项验证。
提交后页面刷新但数据没发出去
浏览器默认会把 提交当成一次完整页面跳转，如果没配 method 或用了 GET，数据就直接拼在 URL 里了——后端可能根本没收到 POST 体，或者你连请求都没发（比如 JS 阻止了默认行为但没手动提交）。
- 检查
是否漏写了method="POST"，尤其和action一起用时 - 用浏览器开发者工具的 Network 标签页看：有没有发出请求？状态码是不是 200？Request Payload 里有没有你填的数据？
- 如果用了
event.preventDefault()却没调fetch()或form.submit()，那表单就“消失”了——既没跳转也没发请求
input type="number" 允许输入字母或空字符串
type="number" 只是触发数字键盘、提供基础校验，但用户仍可粘贴文本、删光内容、甚至输入 e 或 -。它不阻止非法值，只影响初始解析和 valueAsNumber 的结果。
- 提交前必须用 JS 检查
input.value是否为有效数字：!isNaN(input.value) && input.value !== '' - 别依赖
required和min/max做最终校验——它们只在调用checkValidity()或原生提交时生效 - 服务端永远要重新解析并校验，因为前端校验可被绕过
label for 和 input id 对不上导致点击无效
这是最常被忽略的关联断裂点。浏览器靠 label[for] 和 input[id] 的字符串完全匹配来建立点击穿透，大小写、空格、下划线差一点都不行。
- 检查
for属性值是否和目标input的id一模一样（包括前后空格） - 避免用动态生成的 ID（比如 Vue 的
:id="`input-${index}`"）却不同步更新label for - 如果不用
for，可以把input直接嵌在label内部，这样天然绑定，无需 ID
select 多选值取不到或格式不对
的 value 属性只返回第一个选中项，不是数组。直接读 select.value 会丢数据；用 select.options 遍历时又容易漏掉 selected 判断。
- 正确取值方式：
Array.from(select.selectedOptions).map(opt => opt.value) - 注意
selectedOptions是 HTMLCollection，不能直接用.map，得先转数组 - 如果后端需要逗号分隔字符串，别用
join(',')然后传给接口——确保每个 value 本身不含逗号，否则解析错乱
表单的问题往往不在逻辑多复杂，而在于那些「看起来应该自动工作」的细节：ID 对不上、type 和校验错位、事件拦截后忘了补发、多选值误读成单值。这些地方一漏，调试时就容易反复怀疑网络或后端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
