必须在submit事件处理函数第一行调用event.preventdefault()，否则页面立即刷新导致取值失效；formdata可一次性获取带name属性的全部字段值，比手动遍历更可靠。
表单提交时用 event.preventDefault() 阻止默认跳转
直接监听 submit 事件但不阻止默认行为，浏览器会立刻刷新页面或跳转，导致你根本来不及读取输入值。必须在事件处理函数里第一行调用 event.preventDefault()，否则后续所有取值逻辑都白写。
- 错误写法：
form.addEventListener('submit', () => { const v = input.value; })—— 页面已刷新，v可能取到但没机会用 - 正确顺序：先
event.preventDefault()，再取值、校验、发请求 - 注意：
preventDefault()只对原生表单提交有效；如果是按钮type="button"手动触发，则无需此步
用 FormData 一次性获取全部字段值最稳妥
FormData 能自动匹配 name 属性，兼容文本框、多选框、文件域，还支持重复键（如多个 name="tag"），比手动遍历 input 元素更少出错。
- 前提：每个
<input>、<select></select>、<textarea></textarea>必须有name属性，否则FormData忽略它 - 基础用法：
const data = new FormData(formElement); const value = data.get('username'); - 批量转对象（常见需求）：
Object.fromEntries(data.entries())—— 但注意：多选 checkbox 只返回第一个勾选项，要用data.getAll('hobby') - 文件上传也走同一套逻辑，不用额外处理
input[type="file"]
直接读 input.value 适合简单场景，但要注意类型和空格
如果只取一两个字段，且确定它们是文本类输入，直接访问 .value 最快。但容易忽略几个细节：
-
value永远是字符串，哪怕input[type="number"]，也要手动parseInt()或parseFloat() - 用户粘贴内容时可能带首尾空格，建议统一
.trim()，否则后端校验常失败 -
checkbox和radio不能只看.value，得判断.checked状态：cb.checked ? cb.value : null - 禁用（
disabled）的控件不会被FormData收集，但.value仍可读取 —— 这点要按业务决定是否允许取值
服务端接收不到值？先检查 name 和 method 是否匹配
前端取到值不等于后端能收到。常见断点不在 JS，而在表单配置本身：
-
<form method="POST"></form>提交时，后端必须用 POST 方式接收；若写成GET，值会出现在 URL 参数里，但 body 为空 - 所有要提交的字段必须有
name，id不起作用；写成<input id="email">就等于没传 - 如果用了框架（如 React），确保不是受控组件未同步 state 到 DOM，此时
input.value可能还是初始值 - 用浏览器开发者工具的 Network 标签页，点开提交的请求，看 Payload 或 Query Params 里有没有对应字段名 —— 这是最直接的验证方式
FormData 的健壮性往往比手拼对象高，但别忘了它不包含 disabled 字段，也不处理未勾选的 checkbox —— 这些边界情况，光靠「取到值」还不够。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
