output 是 HTML5 专为表单动态计算结果设计的语义化元素，必须置于 form 内、用 for 关联输入控件、通过 value 属性更新内容，否则丧失无障碍支持、重置清空和 FormData 提交等核心能力。
output 标签不是“能显示文字的 div”，它是 HTML5 中唯一专为表单内动态计算结果设计的语义化元素。它的价值不在视觉呈现，而在明确告诉浏览器、辅助技术与开发者：“这里的内容由其他表单控件实时计算得出”。
必须用 for 属性建立可访问性关联
for 属性是 output 实现语义化的关键，它让屏幕阅读器知道结果依赖哪些输入源：
- 值必须严格匹配 input 元素的 id（大小写敏感、不可含空格），例如
<input id="price">对应<output for="price"></output> - 多个输入可用空格分隔：
for="price quantity discount"，表示该结果由这三个控件共同影响 - 省略 for 属性，output 就退化为普通内联元素：屏幕阅读器无法识别逻辑关系，表单重置后也不自动清空
value 属性是语义与行为统一的核心
更新内容时，应优先操作 value 属性，而非 textContent 或 innerHTML：
-
output.value = String(result)✅ 同步渲染、支持form.reset()清空、可被FormData捕获、无障碍友好 -
output.textContent = result⚠️ 虽能显示，但部分旧版 Safari 不触发重置，且提交时后端收不到该字段（除非额外赋值给 value） -
output.innerHTML = result❌ 禁止使用：存在 XSS 风险（尤其结果来自用户或 API），破坏语义结构，部分浏览器忽略文本节点
必须置于 form 元素内部才能发挥完整语义效力
脱离表单使用的 output，会丢失多项原生能力：
- form.reset() 无法自动清空其 value
- 无法通过
form.elements['name']直接访问 - 不参与 FormData 序列化，提交时该字段缺失
- 屏幕阅读器缺少上下文，仅读作“一段文本”，而非“价格计算结果”
搭配 input 事件实现真正实时反馈
语义再强，也需 JavaScript 驱动计算逻辑。推荐绑定 input 事件而非 change：
- input 事件覆盖键盘输入、粘贴、range 拖动、语音输入等所有实时操作场景
- 对每个输入值做容错处理：
parseFloat(val) || 0，避免 NaN 传播 - 若 output 在 form 外，需显式设置
form="form-id"，否则 reset 行为失效
