浏览器仅提交form内带name属性的可提交元素，dom结构必须正确嵌套，name是后端取值唯一依据，form属性可解耦视觉与逻辑，formdata用于可控提交。
浏览器只打包 form 内部、带 name 属性的可提交元素（input、select、textarea、button）的值，其他情况一律不进提交数据——不是 JS 没写对，是 DOM 结构本身就不满足表单采集前提。
控件必须在 form 标签下直接或间接嵌套
常见错误是把 input 放进 td 但没包进 form，或者用 CSS 定位“视觉上放进去”，结果提交后后端收不到任何字段。浏览器根本不看样式，只认 DOM 层级关系。
-
form可以包裹整个table，也可以只包裹某几行tr，只要所有要提交的控件都在其开始与结束标签之间 - 若表格结构复杂（比如固定表头、滚动体分离），不要强行把
form塞进thead或tbody内部——容易被浏览器自动修复导致结构错乱 - 动态插入的行（如 JS 添加新
tr），必须确保新input节点被 append 到已存在的form内，而不是仅插入到table中
name 属性是唯一识别字段的依据
没有 name 的控件，哪怕有 id、data-* 或正确渲染，也不会出现在提交数据里。后端靠 name 键名取值，比如 POST 请求体里的 user_email=xxx 来自 name="user_email"。
- 多行表格用数组语法命名：如
name="items[0].price"、name="items[1].desc"，后端（PHP/Node.js）能自动解析成对象数组 - 避免空格和点号：
name="user name"会被截断为user，name="user.name"在部分框架中触发属性访问而非键名 - 文件上传控件
input[type="file"]同样需要name，否则FormData不会包含该字段
form 属性可解耦视觉与逻辑归属
当表格布局不允许把 form 包裹整张表（比如需跨区域操作、复用同一表单逻辑），就用 HTML5 的 form 属性显式绑定控件到外部 form 元素。
- 目标
form必须有id，例如<form id="order-form"></form> - 控件上写
form="order-form"，值必须严格匹配该id，大小写敏感 - 带
form属性的button[type="submit"]点击时会触发表单的submit事件，并执行原生验证（required、pattern等） - 注意：该机制不支持
label的for关联，点击label不会激活绑定控件的验证或聚焦
FormData 是可控提交的底层接口
当需要干预提交内容（如添加额外字段、过滤空值、预处理文件），或绕过原生表单跳转行为，应使用 FormData 配合 fetch 或 XMLHttpRequest。
- 构造时传入表单元素：
new FormData(document.getElementById("myForm"))，它会自动收集所有带name的控件值 - 手动追加字段：
formData.append("timestamp", Date.now())，或覆盖已有字段：formData.set("token", "abc") - 文件字段会被完整保留，无需额外处理；但注意：如果表单设了
enctype="multipart/form-data"，而你用fetch提交，FormData会自动设置请求头，无需手动指定 - 调用
submit()方法不会触发FormData构造——那是两个不同路径：一个是原生表单提交，一个是脚本控制提交
最容易被忽略的是：动态生成的控件如果没有在插入 DOM 后重新绑定 form 属性或确保父级 form 存在，它们就永远游离在表单数据之外；而 FormData 构造函数只读取当前 DOM 状态，不会监听后续变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
