<output>: 输出标签
最后更新：2026-10-13
<output>输出标签
表示计算或用户操作的结果，常配合表单与 JavaScript 实时显示输出值，可用 for 属性关联参与计算的输入控件。
| 分类 | 表单 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </output> 标签 |
| 状态 | 标准 |
📝 语法
<output name="result">0</output>⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
for | 空格分隔的其他元素 id，表示参与计算的项。 | |
form | 所属表单的 id（可关联外部表单）。 | |
name | 提交表单时使用的字段名。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <output> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： output 默认不可编辑，但会被 form 的 reset 重置；它只是结果展示，不是输入控件。
❓ 常见问题
Qoutput 标签是做什么用的？
A
<output> 显示「计算或用户操作的结果」，典型场景是滑块联动值、表单实时合计：<output for='a b'>30</output>，for 属性列出参与的控件 id。它自带 aria-live 语义，值变化会被屏幕阅读器播报。Qoutput 和 span 显示计算结果有什么区别？
A
<output> 有「结果」语义且默认 aria-live='polite'（值变化自动播报），span 没有这些。计算结果、联动值用 output，静态文本用 span——语义和无障碍都更准确。Qoutput 的 for 属性是必需的吗？
A不是必需。单个控件的联动（如滑块旁的数值）可以省略 for；结果由多个控件共同决定时（如 a+b），写
for='a b' 空格分隔的 id 列表能明确关联关系。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
