output 标签需用 for 属性绑定表单控件的 name（非 id），严格区分大小写；无 name 则失效；多控件联动须手写 JS 监听计算，不可依赖 for 多值或自动公式；Safari 对 for 语义支持弱，功能依赖 JS 更新。
output 标签必须用 for 属性绑定表单控件 name
output 本身不自动响应输入变化，它只是个展示容器。真正触发更新得靠 JavaScript 或表单原生事件机制。但前提是 for 属性值必须严格匹配目标控件的 name（不是 id），否则浏览器不会建立关联关系。
常见错误是写成 for="input-id"，结果完全没反应。正确写法是：
<input type="number" name="price"> <output for="price">0</output>
-
for的值必须和name完全一致，区分大小写 - 多个控件可共用一个
name（如 radio 组），此时output会监听该 name 下所有控件的变化 - 如果控件没有
name，for就失效 —— 这是初学者最常踩的坑
用 oninput + valueAsNumber 避免字符串拼接错误
直接读 input.value 拿到的是字符串，做算术会出错（比如 "2" + "3" === "23"）。必须用 valueAsNumber 或显式转换。
推荐在 oninput 中实时计算并写入 output.value：
立即学习“前端免费学习笔记（深入）”；
<input type="range" name="discount" min="0" max="100">
<output for="discount">0</output>
<script>
document.querySelector('input[name="discount"]').oninput = function() {
const val = this.valueAsNumber || 0;
document.querySelector('output[for="discount"]').value = val + '%';
};
</script>-
oninput比onchange更及时，拖动 range 或连续输入时都能响应 -
valueAsNumber对非数字输入（如空值、非法字符）返回NaN，记得兜底 - 不要依赖
output的默认行为来更新内容 —— 它只负责“显示”，不负责“计算”
多个输入联动时，output 不支持自动公式，得手写逻辑
HTML 规范里 output 没有内置表达式解析能力，像 <output for="a b c"></output> 这种写法无效。多个字段参与计算，必须自己监听所有相关控件。
例如价格 × 数量 = 总价：
<input type="number" name="price"> <input type="number" name="qty"> <output for="price qty">0</output>
上面的 for="price qty" 纯属误导 —— 浏览器根本不识别多个值。实际要这样写：
<script>
const price = document.querySelector('input[name="price"]');
const qty = document.querySelector('input[name="qty"]');
const total = document.querySelector('output');
<p>[price, qty].forEach(el => el.oninput = updateTotal);</p><p>function updateTotal() {
const p = parseFloat(price.value) || 0;
const q = parseInt(qty.value) || 0;
total.value = (p * q).toFixed(2);
}
</script>- 别指望
for属性能串联逻辑，它只用于单字段绑定提示用途 - 多个输入时，统一用一个函数处理，避免重复逻辑和状态不同步
- 注意浮点精度问题，
toFixed()后再转数字可能引发新问题，展示用字符串更安全
兼容性没问题，但 Safari 对 for 属性的支持稍弱
Chrome、Firefox、Edge 都能正常响应 for 关联并高亮对应控件（比如聚焦 input 时 output 会获得 :focus-within 效果），但 Safari 目前基本忽略 for 的语义关联，只当普通属性看待。
这意味着：
- 视觉反馈（如 focus 样式传递）在 Safari 里不工作
- 辅助技术（如屏幕阅读器）对
for的支持在 Safari 中也不稳定 - 功能层面不受影响 —— 只要你手写 JS 更新
output.value，所有浏览器都正常显示
所以，for 属性现在更多是语义增强和未来兼容准备，真要保证体验，JS 绑定和更新逻辑不能省。
