HTML
An element for dynamically displaying form inputs and calculation results on the page.
output 要素
<output>
は フォームの入力値や JavaScript で計算した結果を、そのまま文書の一部として描画できる唯一のネイティブ要素 です。再描画を伴う DOM の差し替えをせずに「値の表示枠」を用意できるため、手軽に リアルタイムな結果表示 を実装できます。
基本のマークアップ
<form oninput="total.value = Number(a.value) + Number(b.value)">
<input type="number" id="a" name="a" value="1">
+
<input type="number" id="b" name="b" value="2">
=
<output name="total" for="a b"></output>
</form>
input[type="number"] {
width: 4em;
}
name
- 送信時にキーとして利用できる
for
- 対応するフォーム部品 ID の空白区切りリスト
form
- 要素がフォーム外にあっても関連付けられる
oninput
により入力が変わるたび合計が即時反映されます。<output>
自体はフォーム部品ではないため、フォーカスを移してもキーボード入力は受け付けません。
JavaScript での操作
値の書き込み
document.querySelector('output[name="total"]').value = 42;
.value
プロパティは 自動で textContent
と同期 するため、innerText
を直接書き換えるより可読性が高く、フォーム送信にも正しく反映されます。
イベント連動
const out = document.querySelector('#status');
navigator.onLine
? (out.value = 'オンライン')
: (out.value = 'オフライン');
window.addEventListener('online', () => (out.value = 'オンライン'));
window.addEventListener('offline', () => (out.value = 'オフライン'));
状態表示パネルとして使えば、視覚的な「LED 表示」のように扱えます。
アクセシビリティ
- ARIA ロールは既定で
status
に近い
- 支援技術は動的テキストとして読み上げる。必要に応じ
role="status" aria-live="polite"
を明示すると確実。
- ラベル付け
<label for="total">合計</label>
を併用するとスクリーンリーダー利用者に意味が伝わりやすい。