零 js 即可让外部输入参与提交：通过 form 属性将 input/select/textarea 关联到指定表单，需 name 属性且 form 值严格匹配目标 form id；动态注入用 submit 事件追加 hidden 字段；数组命名如 skill[] 支持多值；formdata.submit() 不存在，勿混淆原生提交与 fetch。
form 属性关联法：零 JS 即可让外部输入参与提交
只要字段在页面上已存在，且你能在 HTML 阶段确定其 name 和目标表单 ID，就完全不需要写 submit 监听器。浏览器原生支持通过 form 属性将任意 <input>、<select></select> 或 <textarea></textarea> 关联到指定表单。
常见错误是把输入框硬塞进 <form></form> 内部，导致结构混乱或样式冲突；或误以为必须用 JS 拼接数据再发请求，结果绕过 cookies、enctype 自动处理和重定向跳转等关键机制。
-
<input>必须有name属性，否则不会被提交 -
form属性值必须严格匹配目标<form id="xxx"></form>的 ID，大小写敏感 - 该方法天然支持回车提交、无障碍读取、HTML5 表单验证（如
required）
submit 事件中动态插入隐藏字段：适合运行时计算值
当要注入的是 JS 计算出的值（比如时间戳、选中项聚合结果、加密签名），就得在 submit 事件里动手。关键点在于：不调用 e.preventDefault()，否则表单就停在那里不动了。
容易踩的坑是直接改 innerHTML —— 这会销毁已有 input 的当前 value，尤其对用户正在输入的文本框极不友好。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 用
document.createElement('input')创建新元素，设type="hidden"、name和value - 用
form.appendChild()追加，而不是替换整个 innerHTML - 若需多次提交、反复注入，记得每次先检查是否已存在同名字段，避免重复添加
name 属性带数组语法：后端接收多组同类型数据
要支持“添加多个技能”“上传多张图片”这类场景，不能只靠循环创建 <input name="skill">——那样后端只能拿到最后一个值。必须用数组式命名，如 skill[] 或 items[0][title]。
注意不同后端对 name 解析规则不同：skill[] 在 PHP 中自动转为数组，在 Node.js 的 body-parser 中也默认支持；但 items[0].title 这类点号写法多数需要额外解析逻辑。
- 用
insertAdjacentHTML('beforeend', htmlString)插入带动态索引的字段最轻量 - 避免用
innerHTML += ...，它会触发完整重渲染，丢失所有已绑定事件和输入状态 - 删除字段时，别只删 DOM，还要同步清理可能存在的 JS 状态变量（比如记录当前最大 index 的 counter）
不要用 FormData.submit()：这个方法根本不存在
看到 FormData.submit() 报错，不是你写错了，而是它压根没被任何标准定义过。FormData 是为 fetch / XHR 设计的，和原生表单提交流程无关。
强行用 fetch 替代 <form></form> 提交，会丢失几样关键东西：自动携带 cookie（尤其登录态）、enctype="multipart/form-data" 的文件上传支持、服务端重定向后的页面跳转、以及浏览器地址栏 URL 的自然更新。
- 如果必须用 fetch，得手动收集所有表单控件值，包括
checkbox和select multiple的多选逻辑 - CSRF token 若放在 hidden input 里，也要手动从 DOM 取出来 append 进 FormData
- 真正需要异步提交时，优先考虑在 submit 事件里
e.preventDefault()+fetch，但得自己补全 redirect 处理和错误反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
