output 标签必须绑定表单控件并配合 javascript 更新才生效；脱离 form、缺失 id、误用 for 或 innerhtml 会使其退化为普通内联元素，且 reset() 不清空、formdata 不采集、屏幕阅读器不可读。
output 标签不是“自动计算显示器”，它只在明确绑定表单控件、配合 JavaScript 更新时才起作用；脱离 form、没设 id、乱用 for 或直接写 innerHTML，都会让它退化为普通内联元素。
output 必须在 form 内或显式声明 form 属性
output 不属于任何表单时，reset() 不会清空它，FormData 拿不到它的值，屏幕阅读器也读不出上下文。它不是独立控件，而是表单生命周期的一部分。
- 写在
<form></form>标签内部时，可省略form属性，但显式写出更安全（尤其嵌套表单场景） - 写在
form外部时，必须加form="my-form-id"，且该 id 必须与目标<form id="my-form-id"></form>完全一致（大小写敏感、无空格） - 动态插入的 output，要在
appendChild()后立即设置form属性，Safari 否则忽略关联
for 属性只认 id，且必须严格匹配
for 是语义桥梁，不是逻辑触发器——它只告诉辅助技术“这个输出依赖哪些输入”，不参与 JS 计算。浏览器不会根据 for 自动读值或更新内容。
-
for="price qty"中的price和qty必须是<input id="price">和<input id="qty">的真实id，不是name，也不是 class - ID 含连字符（如
unit-price）或大写字母（如Price）时，Safari 可能解析失败，建议用小写+下划线 - 多个 ID 用空格分隔，不能用逗号、制表符或换行
- input 没设
id，哪怕有name、在同一个 form 里，for也失效
更新内容必须用 value，而非 textContent 或 innerHTML
output.value 是规范定义的可提交属性，textContent 只管显示，innerHTML 有 XSS 风险且破坏无障碍结构。
- 要让后端收到该值，必须设
name并赋值output.value = String(result) - 用
output.textContent = "¥" + val能显示，但form.elements.outputName.value仍为空字符串 - 绝对不要用
output.innerHTML = ...，用户输入若含 HTML 字符（如<script></script>），直接执行 - 首次读
output.value可能返回空字符串（尤其 Safari），建议初始化：output.value = "0"
监听 input 事件比 change 更适合实时更新
change 只在失焦或确认后触发，对 range 拖动、粘贴、语音输入等场景响应滞后；input 覆盖更全，但需注意兼容边界。
-
input事件能捕获键盘输入、粘贴、拖动range、iOS 语音输入，推荐作为默认监听源 - iOS Safari 对
input[type="range"]拖动偶发漏发，建议补监听ontouchend或change - 多个输入共用一个 handler 时，每个值都要做兜底：
parseFloat(val) || 0，别用val * 1（对空字符串返回 0，但对" 1 "返回NaN） - 避免重复绑定：
addEventListener('input', handler)调用多次会导致 handler 执行多次，应先removeEventListener或用事件委托
真正容易被忽略的是：output 的语义价值，只在 for 绑定准确、form 归属清晰、JS 更新逻辑与表单事件严格同步时才成立。随便塞个 <output></output> 却不设 id、不监听事件、不处理空值，反而会让辅助技术更困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
