過去バージョン

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>

属性一覧

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

は単体では現在値が見えないため、

で表示するのが王道パターンです。

<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';    // どの要素でも使える方法

vs

アクセシビリティ

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

ブラウザサポート

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

FAQ

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

Q:

は送信されるか？

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

関連

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