<output>: 输出元素
<output> HTML 元素是一个容器元素，站点或应用程序可以将计算结果或用户操作的结果注入其中。
属性
此元素包括 全局属性。
for-
其他元素
id的空格分隔列表，指示这些元素为计算贡献了输入值（或以其他方式影响了计算）。 表单-
用于关联输出的
<form>元素（其表单所有者）。此属性的值必须是同一文档中<form>的id。（如果未设置此属性，则<output>与其祖先<form>元素关联，如果有的话。）此属性允许您将
<output>元素关联到文档中任何位置的<form>，而不仅仅是在<form>内部。它还可以覆盖祖先<form>元素。 名称-
元素的名称。在
form.elementsAPI 中使用。
在表单提交期间，<output> 的值、名称和内容都不会被提交。
无障碍访问
许多浏览器将此元素实现为 aria-live 区域。因此，辅助技术将在其中宣布 UI 交互的结果，而无需将焦点从产生这些结果的控件上切换开。
示例
在以下示例中，表单提供了一个滑块，其值可以在 0 和 100 之间变化，以及一个 <input> 元素，您可以在其中输入第二个数字。这两个数字加在一起，结果显示在 <output> 元素中，每次任何控件的值发生变化时都会显示。
HTML
<form id="example-form">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>
JS
const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];
function updateResult() {
const aValue = parseInt(a.value);
const bValue = parseInt(b.value);
result.value = aValue + bValue;
}
form.addEventListener("input", updateResult);
updateResult();
结果
技术摘要
规范
| 规范 |
|---|
| HTML 标准 # the-output-element |
浏览器兼容性
BCD 表格仅在浏览器中加载