浏览器原生支持name带方括号（如name="items[]"）提交为数组，后端自动解析；推荐用无索引形式避免动态增删导致的索引错位，删除时需彻底移除dom节点并清理事件与formdata。
HTML表单里怎么用数组式name让后端收到列表
浏览器原生就支持 name 带方括号的写法，后端（比如 PHP、Node.js 的 body-parser、Django）会自动解析成数组或对象。关键不是“怎么模拟”，而是“怎么写对 name 属性”。
常见错误是写成 name="items[]" 却没配对的 DOM 结构，或者混用索引和键名导致解析混乱。
-
name="user[emails][]"→ 解析为user.emails = ["a@b", "c@d"]（PHP/Express 默认行为） -
name="tags[0]"和name="tags[1]"→ 强制顺序索引，缺失中间项可能被跳过 -
name="meta[key1]"和name="meta[key2]"→ 解析为{ key1: "...", key2: "..." } - 不要写
name="list[0].value"：浏览器只认第一层方括号，点号是后端框架自己解析的，原生不处理
JavaScript动态增减表单项时name怎么保持数组语义
手动拼 name 字符串最稳，别依赖 querySelectorAll 数量来生成索引——删除中间项后，索引会断层，后端收不到空位，但你 JS 里还按“当前有几个”来算，就错位了。
推荐用“无索引数组名”起步，删哪条都不影响其他项：
<input name="files[]" type="file"><input name="files[]" type="file">
新增时也统一用 files[]；如果需要关联字段（比如每项带描述），就用结构化命名：
- 新增一项：
<input name="files[0][name]"><input name="files[0][size]"> - 再新增：
<input name="files[1][name]"><input name="files[1][size]"> - 删掉第 0 项？剩下
files[1]不会自动变成files[0]—— 所以更建议用files[][name]这种“空键名”，后端解析时自动补序号
为什么用 [] 而不是 [i] 更安全
显式索引（如 name="item[2]"）在动态操作中极易出问题：JS 删除第 1 项后，原本的 [2] 变成 [1]，但 DOM 上 name 没变，后端收到的还是 item[2]，中间缺了 [0] 和 [1]，有些框架直接丢弃稀疏数组。
[] 是浏览器原生数组推导机制，只要 name 一致，提交时自动聚合成数组，顺序由 DOM 节点顺序决定，和 JS 管理逻辑解耦。
- PHP：
$_POST['items']直接是数组 - Express +
body-parser：req.body.items是数组 - Django：
request.POST.getlist('items')拿全部值 - 注意：如果只有一个
items[]，某些老版本 PHP 会当字符串而非数组，加个隐藏空项可兜底：<input name="items[]" value="" style="display:none">
删除表单项时最容易漏掉的两件事
只删 DOM 节点，不清理关联数据或事件监听，短期看不出问题，但反复增删后内存泄漏、重复提交、校验错乱就开始冒头。
- 删节点前，先调用
element.remove()（别只设display: none，它还在表单里） - 如果有用
addEventListener绑过事件，用element.removeEventListener解绑，或改用事件委托避免手动解绑 - 如果用了
FormData手动收集，删 DOM 后记得重新new FormData(form)，别复用旧实例 - 别在循环中用
for (let i = 0; i 删除节点——长度实时变，会跳项；改用 <code>while (list.length)或倒序遍历
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
