表单提交必须调用 event.preventdefault()阻止页面刷新，否则 js 逻辑丢失；input 事件适合实时验证但需防抖，change 事件适合完成态校验；取值用。value 而非 innertext，复选框判断。checked；form.reset()仅重置 html 初始值，不处理 js 动态修改或框架状态。
表单提交时阻止默认行为用 event.preventDefault()
不加这句，<form></form> 一提交页面就刷新，所有 JS 逻辑全丢。这是最常漏的一步，尤其新手直接写 submit 监听却没拦住默认动作。
常见错误现象：console.log 打印了，但表单还是跳转 / 刷新；输入框内容一闪就清空。
- 必须在事件回调第一行调用
event.preventDefault()，不能放在异步操作之后 - 只对
submit事件有效，click在按钮上监听不能替代它（按钮可能不是 submit 类型） - 如果用了
fetch提交，记得检查响应状态再决定是否允许后续跳转
input 实时验证该监听 input 还是 change？
input 事件更及时，用户每敲一个字就触发；change 要等失焦或回车才触发，适合校验完成态。
使用场景：用户名实时查重用 input；生日选择器选完再校验用 change。
立即学习 “ 前端免费学习笔记（深入）”；
-
input在中文输入法下可能触发过早（拼音未上屏就发请求），可加防抖（setTimeout+clearTimeout） -
change对<select></select>和<input type="checkbox">更可靠，input在某些浏览器里不触发 - 不要在
input里直接调fetch，高频输入易发一堆请求，务必节流或防抖
表单元素值怎么取才不会读成 undefined 或空字符串？
直接读 element.value 是对的，但前提是你选对了元素、且它确实渲染完成了。
常见错误现象：JS 执行时 DOM 还没加载，document.querySelector 返回 null；或者用了 innerHTML 想取值，结果拿到的是标签文本而非控件值。
- 确保脚本在
