浏览器表单提交依赖name属性和enctype编码方式共同决定数据是否被正确序列化；formdata需显式传入form元素才能按规范收集成功控件；enctype错误或name缺失将导致后端无法解析数据。
浏览器原生提交表单时，form 标签本身不“序列化”，它只是声明规则；真正执行序列化的是浏览器对 name 属性和 enctype 的解析逻辑——你写错一个 name 或漏设 enctype，后端收到的数据就可能完全不对。
为什么 FormData 构造函数传 form 元素才有效
FormData 不是“自动扫描页面所有 input”的魔法对象。它只在你显式传入一个 <form></form> DOM 元素时，才按 HTML 规范收集“成功控件”（即有 name、未 disabled、且已选中/填值的控件）。
- ✅ 正确：
const fd = new FormData(document.querySelector('form')) - ❌ 错误：
const fd = new FormData()（空实例，什么都没有） - ⚠️ 注意：
<input id="email">没name→ 不会被收录，哪怕有值 - ⚠️ 注意：
<input name="agree" type="checkbox">未勾选 → 根本不出现在fd中，不是值为""，而是压根没有这个键
enctype 决定编码方式，不是可选项
enctype 不是“配着好看”的属性，它直接控制请求体格式和后端能否正确解析。设错等于把数据打包进错误的信封。
-
enctype="application/x-www-form-urlencoded"（默认）：所有字段 URL 编码成a=1&b=%E4%BD%A0%E5%A5%BD，适合纯文本，fetch发送时可用URLSearchParams(form).toString() -
enctype="multipart/form-data"：必须用于含<input type="file">的表单；每个字段用boundary分隔，文件内容不编码，文本字段也不 URL 编码；fetch必须传FormData实例，不能转字符串 -
enctype="text/plain"：几乎不用；&、=等符号不转义，后端解析极易断裂，比如user=张三&李四会被截断
手动序列化时，name 重复和空值怎么处理
原生序列化对同名字段（如多个 checkbox）和空值有固定行为，手动拼接或转 JSON 时若不注意，就会和浏览器默认结果不一致。
- 多个同名
checkbox：formData.getAll('hobby')返回['read', 'swim']，但发出去是hobby=read&hobby=swim，不是hobby=["read","swim"] - 想让未勾选的
checkbox也传false：得手动补全，例如formData.append('agree', document.querySelector('[name="agree"]:checked') ? 'true' : 'false') - 转 JSON 提交前：
Object.fromEntries(new FormData(form))会把空字符串、null、undefined都变成""，而JSON.stringify()会直接丢掉undefined字段，行为不一致 -
<select multiple></select>未选任何项 →formData中无该键，但你手动遍历时可能误加空数组
动态插入的表单，submit 事件监听容易失效
用 innerHTML、Vue/React 渲染或 JS 创建的表单，submit 事件不会自动绑定。不重新监听，点了就跳转或刷新。
- 必须对
<form></form>元素监听，不是对按钮或 input 监听 -
event.preventDefault()要写在回调第一行，不能包在fetch().then()或setTimeout里 - 动态插入后，立刻执行：
form.addEventListener('submit', handler)，否则事件根本没挂上 -
<button></button>没写type="button"，部分浏览器默认当submit处理，点它也会触发表单提交
最常被忽略的一点：表单提交不是“把值塞进去就完事”，而是 name + enctype + 后端接收逻辑三者必须咬合。调通一次不代表稳定，换一个字段、改一行 HTML、升级一个框架，都可能让 formData.get('xxx') 突然返回 undefined —— 因为那个字段根本没被当成“成功控件”收录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
