属性
此元素包含全局属性。
for-
其他元素的
id的空格分隔列表，表明这些元素为计算提供了输入值（或以其他方式影响了计算）。 form-
与输出关联的
<form>元素（它的表单所有者）。此属性的值必须是同一文档中<form>的id。（如果未设置此属性，则<output>与其父级<form>元素（如果存在）相关联。）此属性允许您将
<output>元素与文档中的任何位置的<form>关联，而不仅仅是<form>内部。它还可以覆盖父级<form>元素。表单提交时，<output>元素的名称和内容不会被提交。 name-
该元素的名称。在
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 = a.valueAsNumber;
const bValue = b.valueAsNumber;
result.value = aValue + bValue;
}
form.addEventListener("input", updateResult);
updateResult();
结果
技术摘要
规范
| 规范 |
|---|
| HTML # the-output-element |
浏览器兼容性
加载中…