この記事の要点

<output> は計算結果やユーザー操作の出力を表す HTML5 のフォーム関連要素 主に <input type="range"> や oninput と組み合わせ、JavaScript で計算した結果を表示する for 属性で計算元の入力フィールドの id を指定（空白区切りで複数可） form 属性で所属する form の id を指定すれば、form の外に置いてもフォーム送信時に値が含まれる スクリーンリーダーは aria-live="polite" 相当として読み上げるため、計算結果のアクセシビリティに優れる

output 要素とは

<output> は HTML5 で導入された計算結果やスクリプトの出力を表現する要素です。<span> でも結果を表示できますが、<output> は意味的に「これは計算結果である」と明示できる点で SEO とアクセシビリティの両方で有利です。

基本構文

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="10"> +
  <input type="number" id="b" name="b" value="20"> =
  <output name="result" for="a b">30</output>
</form>

属性一覧

属性	意味	例
for	計算元の input の id（空白区切り）	for="a b"
form	所属する form の id	form="myform"
name	フォーム送信時の name	name="result"

range スライダーと組み合わせる

<input type="range"> は単体では現在値が見えないため、<output> で表示するのが王道パターンです。

<form oninput="vol.value = volume.value">
  <label for="volume">音量:</label>
  <input type="range" id="volume" name="volume" min="0" max="100" value="50">
  <output name="vol" for="volume">50</output>
</form>

消費税計算の例

<form oninput="tax.value = Math.floor(price.value * 0.1);
                total.value = parseInt(price.value) + parseInt(tax.value)">
  <label>本体価格: <input type="number" id="price" value="1000"></label><br>
  消費税: <output name="tax" for="price">100</output> 円<br>
  合計: <output name="total" for="price">1100</output> 円
</form>

JavaScript からの値の設定

<output> の値は value プロパティでも textContent でも書き換えられますが、値としての意味を持たせるなら value を使うのが推奨です。

const out = document.querySelector('output[name="result"]');
out.value = 42;            // HTMLOutputElement#value
// または
out.textContent = '42';    // どの要素でも使える方法

<output> vs <span>

項目	<output>	<span>
意味	計算結果である	意味なし（インライン汎用）
aria role	status（暗黙）	なし
form 連携	あり（name で送信値に含む）	なし
JS から value で操作	可	不可（textContent のみ）

アクセシビリティ

<output> はデフォルトで aria-live="polite" 相当の挙動を持ちます。値が変化するとスクリーンリーダーが適切なタイミングで読み上げます。計算結果や進捗表示には <span> ではなく <output> を使うことで、視覚障害者にも結果が伝わります。

ブラウザサポート

HTML5 標準で、主要ブラウザ（Chrome / Firefox / Safari / Edge）でいずれも対応済み。IE は非対応ですが、現在はサポート対象外のため気にする必要はありません。

FAQ

Q: oninput と onchange のどちらを使うべき？
A: 入力中のリアルタイム反映には oninput。フォーカスが離れたタイミングで反映したいなら onchange。<output> との組み合わせは oninput が一般的です。

Q: <output> は送信されるか？
A: name 属性を持つ <output> は FormData に含まれます。ただし通常のフォーム送信（application/x-www-form-urlencoded）では送信されないブラウザもあるため、JS で FormData 経由で扱うのが確実です。

関連

• form 要素 — フォームの親要素
• input 要素 — type=range や type=number と組み合わせる
• progress 要素 — 進捗表示。output より進捗向け
• meter 要素 — 範囲のある値（ディスク使用量等）の表示