An element for dynamically displaying form inputs and calculation results on the page.
<output>
要素は、フォームの入力値や JavaScript で算出した値をそのまま文書の一部として描画できる唯一のネイティブ HTML 要素です。DOM の差し替えによる再描画を行わずに「結果を表示する枠」を簡単に用意できるため、リアルタイムな値の変化をスムーズに見せられます。さらに、この要素は「ここは演算結果を示す場所です」というセマンティクス(意味づけ)をブラウザーや支援技術へ伝える役割を持ちます。同じ見た目を <div>
や <span>
でも実現できますが、こうした意味づけは得られません。
また、name
属性を付与すれば 他のフォーム部品と同様に送信データとして扱われ、form
属性を使えば フォームの外側に配置しても特定のフォームと関連付けられます。加えて、aria-live="polite"
や role="status"
と組み合わせることで、値が変化した際にスクリーンリーダーが自動的に更新内容を読み上げるようになり、アクセシビリティも向上します。
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
属性sum=値
がペイロードに含まれる。無指定なら送信されません。for
属性form
属性oninput
により入力が変わるたび合計が即時反映されます。<output>
自体はフォーム部品ではないため、フォーカスを移してもキーボード入力は受け付けません。
for
output.htmlFor
(DOMTokenList)として取得・操作可能。name
form.elements
キー。form
id
を指定。Shadow DOM 内でも有効。value
/ defaultValue
プロパティvalue
は 現在表示している値、defaultValue
は リセット時に戻る既定値。form
の reset()
実行や <input type="reset">
クリックで value
が defaultValue
に戻る。JavaScript
const output = document.querySelector('output[name="total"]');
output.value = 42; // 表示も同期
console.log(output.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 表示」のように扱えます。
output.setCustomValidity('エラー')
→checkValidity()
で動的計算結果も検証対象に。
MutationObserver で for 対象の変更に追従。
CustomEvent と併用して再利用可能な計算コンポーネント化。
CSS
output {
display: inline-block;
min-width: 3rem;
padding: .25em .5em;
border: 1px solid #ccc;
border-radius: .25rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
CSS で display: inline-block
を指定すると、幅や余白を調整しやすくなります。font-variant-numeric: tabular-nums
を使うと、数字が等幅フォントで揃い、計算結果が見やすくなります。
エラー時 :invalid { color: red; }
で視覚フィードバック。
HTML
<output id="total" aria-live="polite" role="status"></output>
status
に近いrole="status" aria-live="polite"
を明示すると確実。<label for="total">合計</label>
を併用するとスクリーンリーダー利用者に意味が伝わりやすい。モダンブラウザー全般でフルサポート(Firefox4+, Safari7+, Chrome10+, Edge79+, Mobile 含む)。IE は未対応。
Safari 旧版(≤6)では value
反映が遅延するバグがあったが、2023 年に修正済み。
送信仕様は URL エンコード フォーマットに準拠。type="hidden"
の代用可。
<calc-sum>
内部で <output>
を使い、外部属性変更で Shadow DOM 内値を更新。<output>
にパイプしてプログレスバーと同期。<output :value="total" />
(v-model ではなく props 経由で一方向データフローを保つ)<output ref={ref => ref && (ref.value = total)} />
で uncontrolled 的に扱うとフォーム送信が容易。output.innerHTML
に入れるのは XSS リスク。value
か textContent
を使う。Trusted Types を導入するとさらに安全。value
プロパティも変更。<output>
は「ただ表示するだけ」の要素に見えて、フォーム送信・バリデーション・アクセシビリティといった フォーム API の恩恵をフルに受けられる稀有な結果表示要素 です。
基本構文を押さえつつ、JavaScript で value
を制御し、for
や name
を活用すれば、インタラクティブでセマンティックかつアクセシブルな UI を手軽に構築できます。