先记住这个答案
<output> 表示计算结果或用户操作后的反馈。比如拖动数量滑块时，页面可以同步显示“总价 120 元”；用 for 属性列出参与计算的输入控件 ID，有助于表达关系。但 <output> 的内容不是可编辑输入，也不会像普通成功控件那样作为业务值自动提交。需要保存结果，应在服务端根据真实输入重算。
<output>表示计算或操作结果for可列出参与计算的控件 ID- 结果内容可由脚本更新
- 需要提交结果时另存入控件或服务端重算
数量变化时展示总价
购物表单里用户改数量，希望立即看到估算总价。输入框保留用户真正提交的数量，输出元素只负责告诉用户当前计算结果；这样字段与反馈的职责清楚。
<form>
<label for="count">数量</label>
<input id="count" name="count" type="number" min="1" value="1">
<output id="total" for="count" aria-label="估算总价">20 元</output>
<button type="submit">下单</button>
</form>脚本监听数量变化后更新 total.textContent 即可；示例中的 20 元 是初始展示值。for="count" 指向输入控件的 ID，不是表单提交时的字段名。
如果想让用户知道输出变化，可以检查辅助技术实际朗读效果；频繁变化的输出不宜无条件设置过于激进的实时播报。
提交时以输入为准
有人会给 <output> 写 name，以为显示的总价就成了可靠订单价格。即使能在脚本里读到这个值，客户端内容仍能被修改，不能作为结算依据。服务端应根据提交的商品、数量与当前价格重新计算。
表单只是收集原始输入，输出用于解释当前页面状态。若业务确需把某个派生值随表单提交，也应明确设置隐藏输入或其他字段，并在服务端重新验证，不能把“页面显示过”当成可信证明。
例如数量为 3、单价为 19.9 元，页面上的总价可以由脚本计算并写进 <output>，但最终订单金额必须由服务端根据商品价格和数量重新计算。<output> 是展示计算结果的语义元素，不应被当作可信的支付金额字段；若业务必须随表单发送某个值，应明确检查实际表单数据，不能只看到页面上有数字就以为它会以输入字段的方式提交。关联输入的 for 属性接收的是控件 ID 列表，便于表达“结果由哪些输入得出”。
容易答错的地方
- 把
<output>当作另一个文本框 - 它不用于用户直接编辑，语义是结果。需要用户输入时应使用合适的
<input>。 - 把前端计算结果当成订单价格
- 前端脚本与 DOM 都能被修改，价格、折扣等关键结果应在服务端根据可信数据重算。
面试官还会怎么问？
for 里写字段名还是 ID？
写参与计算元素的 ID，可用空格分隔多个 ID；它与 name 的提交含义不同。
结果变化时怎么更新？
在输入的 input 或 change 事件里计算，再设置 <output> 的文本或值。
不写 <output> 可以用 <span> 吗？
能显示文本，但 <output> 更准确地表达“这是计算或操作结果”的语义。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。