目标表单带默认值需在内部控件单独设置value/defaultValue或JS赋值，form属性仅指定提交目标；重置只恢复初始HTML value值，修复需同步setAttribute或改用JS显式赋值。
form 属性绑定后，如何让目标表单带默认值？
跨表单提交本身不传递默认值——form 属性只决定“点这个按钮时，提交哪个 form”，它不管里面字段填了什么。默认值必须在目标 form 内部的控件上单独设置，和是否跨提交无关。
也就是说：form="login-form" 的按钮能触发 提交，但该表单里 显示什么，只取决于它自己的 value、defaultValue 或 JS 赋值逻辑。
- 服务端渲染最稳：PHP/Python 模板直接写
- 前端初始化要等 DOM 就绪：用
DOMContentLoaded或document.getElementById("email").value = localStorage.getItem("lastEmail") || "" - 别依赖 placeholder：它不参与提交，也不影响重置行为
为什么用 form 属性后，表单重置不恢复 JS 设置的默认值？
因为 form.reset() 只还原到元素**初始 HTML 中的 value 属性值**，不是你后来用 JS 改的 el.value。这是浏览器原生行为，和 form 属性无关，但跨表单场景下更容易暴露这个问题——用户以为“点了重置就回到上次填的邮箱”，结果清空了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 修复方法一：同步更新属性 ——
el.value = "xxx"; el.setAttribute("value", "xxx"); - 修复方法二（推荐）：不用重置按钮，改用 JS 显式赋值，比如
document.getElementById("email").value = initialEmail; - 验证技巧：在控制台输
document.getElementById("email").defaultValue，看到的才是重置会恢复的值
跨表单 + 动态默认值，怎么避免 localStorage 读写时机错乱？
常见错误是：页面加载时从 localStorage 读邮箱并设进 input，但用户还没点跨表单按钮，就先点了另一个表单的 submit，导致数据误传。
- 确保默认值只作用于目标表单：给目标 input 加唯一 ID（如
id="login-email"），JS 里明确操作它，别用模糊选择器 - 不要在全局脚本里无条件执行赋值；封装成函数，在需要时（如弹窗打开、tab 切换后）再调用
- 如果默认值来自 URL 参数（如
?email=test@example.com），解析后立即写入目标 input，且仅执行一次 - 注意同域限制：iframe 里的表单无法直接读取父页
localStorage，得用postMessage
React/Vue 中用 form 属性时，默认值怎么配才不冲突？
框架里直接操作 DOM 的 value 属性会破坏受控性，尤其当按钮跨表单触发提交时，容易出现 warning 或输入锁死。
- React：别用
form属性 + 原生input value={...}混搭；要么全受控（value={email} onChange={setEmail}），要么用defaultValue配合form属性（仅首次有效） - Vue：用
v-model绑定数据，form属性仍可正常使用；但注意v-model本质是语法糖，底层仍是:value+@input，所以必须保证 data 初始化正确 - 关键原则：跨表单按钮的
form属性和目标表单的受控状态是两件事，不能指望一个属性解决两个层面的问题
真实项目里最容易被忽略的，是「默认值来源」和「提交目标」这两条链路完全独立——一个靠 HTML 属性或 JS 初始化，一个靠 form 属性或 DOM 位置。强行把它们绑在一起想，反而越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
