<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 表格僅在瀏覽器中載入