output标签需name和form属性才能响应value赋值，for属性必须严格匹配id（大小写、符号），监听input事件实时更新，服务端不接收其值，须用hidden input同步提交。
output 标签不会自动计算或响应输入变化，它只是个语义容器；所有实时更新必须靠 JavaScript 手动读值、算值、赋值。
为什么output.value赋了值却没显示
常见原因是：output不在 form 内，或没设 name 属性。Safari 尤其严格：只有同时满足 form="xxx"（或物理嵌套）和 name="yyy"，value 赋值才会触发渲染。若只做展示，直接用 textContent 更稳，但会丢失表单提交能力。
- 检查 DOM 结构：
<output name="total"></output>必须在<form></form>标签内，或显式写form="my-form" - 不要依赖初始文本内容 —— JS 第一次赋值后，
value才成为真实数据源 - 动态插入的
output，必须在插入 DOM 后立即设置name和form，否则 Safari 不认
for 属性到底绑定 id 还是 name
答案是：**必须是 id，且大小写、连字符、空格全部严格匹配**。它不参与任何逻辑，只影响屏幕阅读器和部分浏览器对 value 的渲染行为。写错就等于没写。
-
<input id="unit-price">→<output for="unit-price"></output>✅ -
<input name="unit-price">→<output for="unit-price"></output>❌（for找不到同名id） -
<input id="Price">→<output for="price"></output>❌（大小写敏感） -
for="a,b"或for="a b c"都合法，但只是语义声明，JS 仍需自己取每个id的值
监听 input 还是 change 事件
选 input。它覆盖键盘输入、粘贴、滑块拖动、iOS 语音输入等所有实时场景；change 只在失焦或回车时触发，用户会明显感知“卡顿”。
-
input[type="number"]输入字母时，this.valueAsNumber返回NaN，必须兜底：const val = this.valueAsNumber || 0 -
input[type="range"]在 iOS Safari 上偶发漏发input，建议补监听ontouchend或change - 避免重复绑定：
addEventListener('input', handler)多调几次，handler就执行多次 —— 动态增删行时尤其要注意 - 多个输入共用一个
output，每个都要监听，漏一个就断链
表格里用 output 显示行内计算结果
不能直接绑定 td 文本，因为 td 不是表单控件，output 对它完全无感。必须把数值“抽出来”，放到可监听的 input 中（哪怕隐藏）。
- 推荐做法：把关键单元格换成
<input type="number" class="hidden-value">，用 CSS 隐藏或放表格外，再用for关联 - 动态表格行数不确定？别硬写
id="price-1"，改用closest('tr')定位：el.closest('tr').querySelector('.price-input').value - 如果只是展示，放弃
for，直接用textContent赋值更可控，也绕过 Safari 的语义解析缺陷 -
output不支持表单重置联动 ——<button type="reset"></button>不会清空它，需手动监听form.reset事件并重置value
最易被忽略的一点：服务端收不到 output 的值。它不是标准可提交字段，即使设了 name，多数浏览器也不在表单序列化中包含它。真要提交，得额外加一个 <input type="hidden" name="total">，并在 JS 中同步更新它的 value。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
