先记住这个答案
<output> 适合显示由输入或计算产生的结果，例如数量滑块变化后的总价；它不会自行计算，也不是所有会变化的文字都该用它。for 可以列出参与计算的控件 id，脚本仍负责更新文本。若只是静态提示，普通文本元素更合适；若是必须填写的输入，应该继续使用表单控件。
output表示计算或操作结果for关联参与计算的控件- 它不会自动计算
- 服务端须重算敏感价格
滑块数量产生的估算总价
订单表单里用户拖动数量滑块，旁边实时显示估算总价。把结果写进 <output>，给它与滑块建立 for 关联，脚本在输入变化时更新 output.value。相比只写一个 <span>，标记更明确表达“这是表单计算结果”。但 output 的值通常不作为普通成功控件直接随表单提交，服务端仍要根据真实输入重新计算价格，不能信任前端展示值。
<label for="qty">数量</label>
<input id="qty" name="qty" type="range" min="1" max="10" value="2">
<output id="total" for="qty">￥20</output>
<script>
const qty = document.querySelector("#qty")
const total = document.querySelector("#total")
qty.addEventListener("input", () => { total.value = `￥${qty.value * 10}` })
</script>output 是可与表单关联的结果元素，for 是参与计算的控件 ID 列表，不会创建自动计算公式。
output 表示表单计算结果
它的默认内容可作为初始显示，运行时脚本负责更新值。结果和输入之间还应有清楚的标签与单位，读屏用户才能理解变化。订单金额、折扣等敏感结果在服务端应重新验证输入并计算，前端 output 只承担交互反馈。
例如数量滑块从 2 改到 3，总价从 40 元变成 60 元，脚本要读取数量、计算结果并更新 <output> 的内容；单写 for="qty" 并不会触发计算。若总价还依赖折扣输入，for 可列出两个控件的 id，但最终金额仍须由服务端在下单时重新计算，不能信任页面上展示的数值。
<output> 的语义是结果，不是保证自动播报每次变化的通知系统。若滑块拖动时结果频繁变化，读屏用户可能需要清楚的标签以及按交互节奏更新的值；不要把每一帧变化都变成高优先级播报。若业务需要明确提示某个计算完成事件，可以另用适当的状态消息，但不要把计算结果与警报混为一谈。
容易答错的地方
- 以为写了
for就会自动相乘 for只声明关联，计算仍需脚本或服务端逻辑。- 把 output 的显示值当作可信提交价格
- 它是前端展示结果，最终价格必须在服务端按可信规则重算。
面试官还会怎么问？
output 的 for 指向什么？
填写参与计算控件的 id，多个可按规范用空格分隔。
能用 output 显示任意加载状态吗？
更适合表单计算或操作结果；普通状态应按语义选择文本和状态通知方式。
改变滑块后如何更新？
监听输入事件，读取当前值，计算后设置 output.value。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。