タイトル: output要素
SEOタイトル: HTML output要素 完全ガイド（計算結果の表示 / form属性 / for属性 / JavaScript連動）
| この記事の要点 |
|
output 要素とは
は HTML5 で導入された計算結果やスクリプトの出力を表現する要素です。 でも結果を表示できますが、 は意味的に「これは計算結果である」と明示できる点で SEO とアクセシビリティの両方で有利です。
基本構文
属性一覧
| 属性 | 意味 | 例 |
|---|---|---|
for | 計算元の input の id（空白区切り） | for="a b" |
form | 所属する form の id | form="myform" |
name | フォーム送信時の name | name="result" |
range スライダーと組み合わせる
は単体では現在値が見えないため、 で表示するのが王道パターンです。
消費税計算の例
JavaScript からの値の設定
の値は value プロパティでも textContent でも書き換えられますが、値としての意味を持たせるなら value を使うのが推奨です。
const out = document.querySelector('output[name="result"]');
out.value = 42; // HTMLOutputElement#value
// または
out.textContent = '42'; // どの要素でも使える方法| 項目 | ||
|---|---|---|
| 意味 | 計算結果である | 意味なし（インライン汎用） |
| aria role | status（暗黙） | なし |
| form 連携 | あり（name で送信値に含む） | なし |
| JS から value で操作 | 可 | 不可（textContent のみ） |
アクセシビリティ
はデフォルトで aria-live="polite" 相当の挙動を持ちます。値が変化するとスクリーンリーダーが適切なタイミングで読み上げます。計算結果や進捗表示には ではなく を使うことで、視覚障害者にも結果が伝わります。
ブラウザサポート
HTML5 標準で、主要ブラウザ（Chrome / Firefox / Safari / Edge）でいずれも対応済み。IE は非対応ですが、現在はサポート対象外のため気にする必要はありません。
FAQ
Q: oninput と onchange のどちらを使うべき？
A: 入力中のリアルタイム反映には oninput。フォーカスが離れたタイミングで反映したいなら onchange。 との組み合わせは oninput が一般的です。
Q:
A: name 属性を持つ は FormData に含まれます。ただし通常のフォーム送信（application/x-www-form-urlencoded）では送信されないブラウザもあるため、JS で FormData 経由で扱うのが確実です。
関連
- form 要素 — フォームの親要素
- input 要素 — type=range や type=number と組み合わせる
- progress 要素 — 進捗表示。output より進捗向け
- meter 要素 — 範囲のある値（ディスク使用量等）の表示