name属性是表单数据提交至后端的唯一键名，缺省、为空、含非法字符或大小写不一致均导致后端无法接收；radio/checkbox需同名分组；name与id功能分离，不可混用。
form 元素的 name 属性决定后端能收到什么字段
HTML 表单提交时，服务器只认 name，不认 id、class 或其他属性。哪怕 DOM 结构再完整，只要某个 <input> 缺少 name，它就不会出现在 POST 请求体里。
常见错误现象：
-
<input type="text" id="username">→ 后端收不到username -
<input type="checkbox">没设value→ 勾选后传的是on，不是预期值 - 多个同名
name="tag"的 checkbox → 原生表单只发最后一个值，不是数组
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 所有要提交的字段必须带
name，且拼写与后端约定完全一致（大小写、下划线） - 复选框/单选框务必显式写
value，例如<input type="checkbox" name="roles" value="admin"> - 若需多值（如多个 tag），后端应按约定解析重复 key，或改用
fetch+ JSON 手动组织数据
多个 form 用 JS 合并提交时，body 内容得手动拼装
原生 HTML 不支持“跨表单提交”，form.submit() 只能提交自身字段。想把 form1 和 form2 的数据一起 POST，就得用 JS 把它们的 name/value 提出来，再构造请求体。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 直接
new FormData(form1); append(...form2.elements)→ 失败，form2.elements是 HTMLCollection，不能直接展开 - 忽略 disabled 字段 → 它们不会被
FormData收集，但有时你就是需要传 - 没处理文件输入 →
FormData能自动包含<input type="file">，但普通fetch发 JSON 就不行
实操建议：
- 用
new FormData()初始化，再遍历两个 form 的elements，逐个append(name, input.value) - 需要传 disabled 字段？手动
formData.append('field', 'value') - 如果最终目标是 JSON 接口，别用
FormData，改用Object.fromEntries(new FormData(form1))合并后JSON.stringify()
Content-Type 不匹配，后端永远拿不到 req.body
浏览器原生 <form method="post"></form> 默认发 Content-Type: application/x-www-form-urlencoded。如果你的服务端中间件只监听 application/json（比如 Express 没配 express.urlencoded()），那 req.body 就是空对象或 undefined。
典型错误日志：
- Express：没加
app.use(express.urlencoded({ extended: true }))→req.body === {} - Flask：写了
request.json但请求头是x-www-form-urlencoded→ 返回None - FastAPI：用
Body()注解但没声明application/json→ 422 错误
实操建议：
- 先确认服务端支持哪种编码 —— 查文档，看中间件是否启用、是否配置正确
- 前端不要“以为”自己发的是 JSON：检查 DevTools → Network → Headers → Request Headers →
Content-Type - 如果后端只接 JSON，就别用原生 form 提交，改用
fetch+JSON.stringify()+ 手动设 header
formaction 属性可实现单表单多端点，但无法合并参数
HTML5 的 formaction 允许按钮覆盖 <form></form> 的 action，比如一个表单配三个按钮，分别提交到 /save、/preview、/export。但它只是改了 URL，**不改变提交的数据范围** —— 仍然只提交当前 form 内部的字段。
所以它解决不了“跨表单”问题，只是“一表单、多终点”的语法糖。
实操注意点：
-
<button type="submit" formaction="/api/export"></button>必须在<form></form>内部，否则无效 - 按钮的
name和value也会随表单数据一起发出，可用于后端区分操作意图 - 想让不同按钮提交不同字段？只能靠 JS 动态增删
disabled，或用多个隐藏<input>控制
真正需要跨表单组织参数时，绕不开 JS 手动收集和构造请求体 —— 这是浏览器限制，不是框架缺陷。
