屬性
此元素包含全域性屬性。
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 |
瀏覽器相容性
載入中…