HTML

An element for dynamically displaying form inputs and calculation results on the page.

output 要素

<output> は フォームの入力値や JavaScript で計算した結果を、そのまま文書の一部として描画できる唯一のネイティブ要素 です。再描画を伴う DOM の差し替えをせずに「値の表示枠」を用意できるため、手軽に リアルタイムな結果表示 を実装できます。

基本のマークアップ

+ =

HTML

<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>

CSS

input[type="number"] {
	width: 4em;
}
name
送信時にキーとして利用できる
for
対応するフォーム部品 ID の空白区切りリスト
form
要素がフォーム外にあっても関連付けられる

oninput により入力が変わるたび合計が即時反映されます。<output> 自体はフォーム部品ではないため、フォーカスを移してもキーボード入力は受け付けません。

JavaScript での操作

値の書き込み

JavaScript

document.querySelector('output[name="total"]').value = 42;

.value プロパティは 自動で textContent と同期 するため、innerText を直接書き換えるより可読性が高く、フォーム送信にも正しく反映されます。

イベント連動

JavaScript

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> を併用するとスクリーンリーダー利用者に意味が伝わりやすい。