output标签仅为语义容器，不自动更新；需JavaScript手动触发计算与赋值，value用于表单提交（须设name），textContent更兼容；for属性必须严格匹配id而非name，且output应在form内以保障重置、无障碍及浏览器兼容性。
output 标签本身不计算、不响应、不自动更新，它只是一个语义容器；所有实时计算和显示必须靠 JavaScript 手动触发，for 属性仅用于辅助技术识别关联关系，对逻辑无影响。
为什么 output.value 有时不显示，而 textContent 可以
因为 output 的 value 属性在规范中是“表单可提交值”，但渲染行为依赖浏览器实现：部分旧版 Safari 在未显式初始化前读取 output.value 返回空字符串，导致赋值后无视觉变化；而 textContent 直接操作文本节点，兼容性更稳。不过，若需表单提交时携带该值（比如配合 form 提交），必须设 name 并用 output.value = String(result) —— 否则后端收不到。
常见错误包括：
- 直接写
<output>0</output>，没设name，提交时字段丢失 - 用
output.innerHTML = '¥' + val，有 XSS 风险，且破坏无障碍结构 - 在未插入 DOM 前就尝试读写
output.value，首次返回空字符串，误判为“失效”
for 属性必须绑定 id，不是 name
几乎所有资料都混淆了这一点：for 的值必须严格匹配目标控件的 id（大小写敏感、不可含空格），不是 name。例如 <input id="price"> 对应 <output for="price">；若写成 for="price-input" 或 for="PRICE"，屏幕阅读器无法建立关联，Safari 下甚至 value 赋值也不生效。
立即学习“前端免费学习笔记（深入）”；
多控件联动时，for="a b c" 是合法语法，但只是语义声明，JS 仍需自行读取全部值并计算 —— 浏览器不会解析这个列表做自动求和。
关键点：
- 没
id的input，for失效 -
form属性可选，但若output在form外，必须显式写form="my-form-id"，否则reset()不清空它 - 动态插入的控件，
id必须在插入 DOM 后立即设置，再绑定事件；Safari 不支持运行时更新for关联
监听 input 事件比 change 更可靠
input 事件能捕获键盘输入、粘贴、拖动 range、甚至 iOS Safari 中的语音输入，而 change 只在失焦或确认时触发，体验断层明显。但要注意：
-
input[type="range"]在 iOS Safari 上拖动时偶发漏发input，建议补监听ontouchend或change - 两个
input共用同一处理函数时，快速切换焦点可能导致中间态（如一个为空、另一个为字母），必须对每个值做兜底：parseFloat(val) || 0，别用val * 1（对空字符串返回0，但对" 1 "返回NaN） - 避免重复绑定：
addEventListener('input', handler)调用多次会导致函数执行多次，建议用removeEventListener清理或用委托方式统一管理
output 必须在 form 内部才具备完整语义效力
脱离 form 使用 output，for 和 name 虽仍可解析，但三大能力会打折：表单重置时不会清空、屏幕阅读器无法建立上下文、部分浏览器（尤其旧版 Safari）对 value 更新的支持不稳定。更隐蔽的问题是：如果用 JS 动态修改了某个 input 的 value 属性但没触发事件（比如通过 el.value = '5'），output 不会响应 —— 必须手动 dispatchEvent(new Event('input'))，或者干脆跳过事件机制，直接更新 output。
真正容易被忽略的是：它的可访问性价值，只在 for 绑定准确、JS 更新与用户交互严格同步、且没有 CSS 干扰（如 display: none 或 visibility: hidden）时才成立。随便加个 <output></output> 却不做这些，反而会让辅助技术更困惑。
