HTML禁止在内嵌，浏览器会静默移出导致验证失效、提交无响应；应使用form属性显式绑定外部表单，如与配合，并为每行分配唯一ID避免数据混淆。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
HTML 本身不允许在 <table>、<code><tr> 或 <code><td> 内部合法嵌套 <code><form></form> —— 浏览器会自动“修复”DOM，导致表单控件失效、验证不触发、提交无响应。跨表单提交不是靠嵌套，而是靠 form 属性显式绑定。
为什么
<form></form> 不能放在 <td> 里
<p>浏览器解析时会把 <code><form></form> 移出表格结构（比如提到 顶部或底部），导致：
• required 验证完全不生效
• submit 按钮点击后无任何网络请求
• 控件的 name 值不会出现在提交数据中
• 开发者工具里看不到表单 DOM 子树，但控制台也不报错——静默失败
form 属性怎么让按钮提交外部表单
把 <form></form> 放到页面任意合法位置（如 底部），再用 form 属性把按钮或输入框“认领”过去：
-
<form id="user-form" action="/api/user"></form>（独立存在，不包裹任何内容） -
<button type="submit" form="user-form">保存用户</button>（可放在<td>、页脚、弹窗里） <li> <code><input name="email" form="user-form">（表格内输入框也能绑定） - 给每行分配唯一
id：<form id="row-101"></form>、<form id="row-102"></form> - 该行所有控件都加
form="row-101"，包括<input>、<select></select>、<button type="submit"></button> - 确保后端能按
row-101这类 ID 区分请求来源（例如解析rows[101][status]）
关键点：
• form 属性值必须严格等于目标 <form id="xxx"></form> 的 id，大小写、连字符、空格都不能错
• 只对 type="submit" 的 <button></button> 或 <input type="submit"> 生效；type="button" 加了也白加
• 提交时只采集 form="user-form" 对应表单内部的控件，和按钮物理位置无关
立即学习“前端免费学习笔记（深入）”；
表格每行要提交不同数据，怎么避免混在一起
常见错误是所有行共用一个 <form></form>，结果点击某行按钮，把整张表的数据全发出去。正确做法是：
容易被忽略的坑：
• 动态渲染表格时，JS 插入 <form></form> 后再加 form="xxx"，但没等 DOM 就绪就点击——浏览器找不到目标 <form></form>，静默失败
• 表格里用了 disabled 输入框，它不会被提交，但前端 UI 没做视觉反馈，用户以为已提交
提交时如何确认数据只来自目标表单
最直接的验证方式是监听 submit 事件并打印 FormData：
document.getElementById('user-form').addEventListener('submit', e => {
e.preventDefault();
const fd = new FormData(e.target);
console.log([...fd.entries()]); // 只显示 user-form 内部有 name 的控件
});
注意：
• e.submitter 能准确告诉你哪个按钮触发了提交（前提是它带 form 属性且为 type="submit"）
• Safari 15.4 之前不支持 e.submitter，旧版需靠 data-action 手动标记
• 如果用 JS 调用 form.submit()，e.submitter 是 null，无法溯源
