推荐在form submit事件中用event.target.elements或FormData获取表单值，避免手动遍历；注意name属性、disabled状态、checkbox/radio的checked判断及enctype设置。
form 表单提交时怎么拿到 input 的值
直接读 event.target.elements 或用 FormData，别手动遍历 document.querySelectorAll('input') —— 容易漏掉 disabled、动态插入、type="hidden" 等情况。
常见错误：监听了 click 而不是 submit，导致回车提交时拿不到；或者用 value 读 checkbox / radio 时没判断 checked 状态。
- 推荐在
form.addEventListener('submit', handler)里处理，保证所有提交方式（按钮点击、回车）都覆盖 -
event.target.elements['username']比document.getElementById()更稳，尤其表单嵌套或 ID 冲突时 - 多选
select或多个同名checkbox，要用Array.from(event.target.elements['tags']).filter(i => i.checked).map(i => i.value)
JavaScript 里用 FormData 获取表单值最省事
FormData 是浏览器原生方案，自动处理文件、空值、编码，兼容性到 IE10+，比手拼对象靠谱得多。
容易踩的坑：new FormData(formEl) 必须传 DOM 元素，不能传选择器字符串；它只收集“成功控件”（即有 name 且非 disabled），name 为空或缺失就直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 获取全部键值对：
const data = new FormData(formEl); for (const [key, value] of data) { console.log(key, value); } - 转成普通对象（注意：会丢掉重复 key，如多个同名 checkbox）：
Object.fromEntries(data) - 上传文件时必须用
fetch(..., { body: data })，不能 JSON.stringify —— 否则文件字段变空字符串
React 中不要直接操作 DOM 取 form 值
用受控组件（value + onChange）或 useRef 绑定，否则 React 状态和 DOM 值会脱节，尤其在快速输入、中文输入法下容易丢字符。
典型翻车现场：在 onSubmit 里用 ref.current.querySelector('input').value，但该 input 是受控的，DOM 值可能滞后于 state。
- 受控写法更安全：
<input value="{username}" onchange="{e"> setUsername(e.target.value)} /> - 真要 DOM 操作（比如集成第三方库），确保 ref 指向的是原生元素：
const inputRef = useRef(null); ... <input ref="{inputRef}">，而不是自定义组件 - 注意
textarea和select的值也得走value控制，不能只靠defaultValue
后端接收不到表单数据？先看 Content-Type 和 name 属性
前端发出去的是 application/x-www-form-urlencoded 还是 multipart/form-data，后端解析逻辑完全不同。而根本前提是：每个要提交的字段必须有 name 属性 —— 没 name 就等于不存在。
调试时打开 Network 面板看 Payload，如果看到空对象或空字段，90% 是 name 拼错、大小写不一致，或者用了 id 当 name。
-
input type="checkbox"单个未勾选时不会出现在 FormData 中，后端需做undefined判断，不能假设必有值 - 带文件的表单必须设
enctype="multipart/form-data"，否则文件字段被忽略，只传文件名字符串 - Node.js 的
express默认不解析表单，要配express.urlencoded({ extended: true })和express.multipart()（或用busboy等）
value 格式、触发时机、是否可空，全都不一样。别指望一个 .value 能通吃，每次都要按具体 type 查 MDN。 
