for属性只绑定控件的id，必须严格字符一致（大小写、连字符、空格等），不认name/class/placeholder；它仅建立语义关联，不触发DOM更新或计算，驱动更新需依赖oninput事件或JavaScript逻辑。
output 的 for 属性到底绑定什么？
for 属性只认 id，不是 name，也不是 class 或 placeholder。它做的是语义关联，不是数据绑定。写成 for="price"，就必须存在一个 id="price" 的输入控件，大小写、连字符、前后空格都必须完全一致。常见失效场景包括：for="unit-price" 对应 id="unit_price"（下划线 ≠ 连字符）、for="a b" 中多了一个空格、或目标元素根本没设 id 只写了 name。
为什么写了 for 却没自动更新？
for 不触发任何计算或 DOM 更新——它只是告诉屏幕阅读器“这个输出依赖这些输入”，浏览器不会基于它执行 a.value + b.value。真正驱动更新的只有两件事：oninput 事件或 JavaScript 监听逻辑。如果你只写 <output for="a b"></output> 而不配 JS，它的内容永远静止。现代浏览器中，oninput 是最轻量的方案，但注意：oninput 在 IE 完全无效，而 <output></output> 标签本身 IE 也不支持。
移动端和 Safari 的兼容性怎么兜底？
Safari（尤其旧版本）对 for 的语义解析较弱，有时即使 id 匹配，output.value 更新后也不会同步刷新文本节点。稳妥做法是：在 JS 更新时，**同时设置 output.value 和 output.textContent**；避免用 innerHTML（有 XSS 风险且破坏表单语义）。另外，oninput 在 Safari 15.4+ 已稳定支持，但若需兼容更低版本，建议改用 addEventListener('input', handler) 并手动取值，同时加防抖防止高频触发。不要在回调里反复调用 document.getElementById()，提前缓存引用更可靠。
多输入联动时类型转换和空值怎么处理？
所有 input.value 都是字符串，直接相加会拼接而非求和："100" + "2" → "1002"。必须显式转类型：Number(a.value) || 0 比 parseInt() 更安全（能处理小数和空字符串）。如果某个输入是 type="range"，它的 value 仍是字符串，同样要转。还要注意：当用户清空数字输入框时，value 是空字符串，Number("") 返回 NaN，所以 || 0 是必要防护。最后，output.value = "¥" + total.toFixed(2) 是推荐写法，既保持语义又支持表单提交和重置。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的关键点：output 的 for 值一旦写错，辅助技术就完全失联；而 JS 更新逻辑哪怕写对了，若没处理 NaN 或没兼顾 Safari 的渲染延迟，用户看到的仍是旧值或空白——这两处断裂点，往往比语法错误更难定位。
