form属性可直接关联外部表单控件，无需js；submit事件中动态添加hidden字段时勿用preventdefault；name需用数组语法如emails[]保证多值提交；新增节点须用事件委托而非重复绑定监听器。
form 属性能直接关联外部 input，无需 JS
浏览器原生支持把 <input>、<select></select> 或 <textarea></textarea> 通过 form 属性“挂”到指定表单上，哪怕它不在 <form></form> 标签内部。这是最轻量、最可靠的方式。
- 只需给控件加
form="your-form-id"，值必须和目标<form id="..."></form>完全一致 - 该字段会自动参与提交、校验、回车触发、无障碍读取等所有原生行为
- 不依赖 JavaScript，页面加载即生效，无事件绑定时机问题
- 注意：IE 不支持该属性（如需兼容 IE，跳过此方案）
submit 事件中动态插入 hidden 字段要避免 preventDefault
如果需要注入运行时计算值（比如时间戳、签名、聚合结果），得在 submit 事件里操作 DOM。但一个常见错误是调用 e.preventDefault() 后又忘了手动提交——这会导致表单完全不发出请求。
- 只要目的只是“加字段”，就不要调用
e.preventDefault() - 用
document.createElement('input')创建新元素，设type="hidden"、name和value - 用
form.appendChild(hiddenInput)追加，不要用innerHTML += ...（会清空已有事件监听器） - 确保读取值时用
.value，不是.innerHTML或.textContent
name 属性重复会导致后端只收到最后一个值
动态添加的多个同类型字段（如邮箱、技能、附件）若都写 name="email"，浏览器提交时只会保留最后一个；后端收到的也是单个字符串，不是数组。
- 必须让每个
name带唯一上下文，推荐用数组语法：name="emails[]"、name="skills[2]" - PHP 自动解析为
$_POST['emails']数组；Node.js +body-parser也原生支持 - 不要在删除某行后重排索引（比如把
skills[3]改成skills[2]），顺序应由后端按实际提交内容处理 - 避免用
name="email_1"这类硬编码命名，否则后端需手动遍历提取，易出错
动态新增的按钮或输入框默认没事件监听
用 document.createElement 或 cloneNode 添加的新节点，不会继承原有事件监听器。点击“删除”按钮没反应，不是代码写错了，而是根本没绑上监听器。
- 别给每个新按钮单独调用
addEventListener，容易内存泄漏且难以维护 - 改用事件委托：把监听器挂在父容器（如
id="form-container"），用e.target.classList.contains('remove-row')判断来源 - 删行时用
e.target.closest('.input-group').remove()，比e.target.parentElement.remove()更安全，避免误删包装层 - 确保父容器有稳定 ID，否则委托失效；且该容器不能是
<form></form>自身（部分浏览器对 form 内事件冒泡有特殊限制）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
