タイトル: output要素
SEOタイトル: HTML output要素 完全ガイド（計算結果の表示 / form属性 / for属性 / JavaScript連動）
| この記事の要点 |
|
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 スライダーと組み合わせる
は単体では現在値が見えないため、 で表示するのが王道パターンです。
<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'; // どの要素でも使える方法| 項目 | ||
|---|---|---|
| 意味 | 計算結果である | 意味なし（インライン汎用） |
| aria role | status（暗黙） | なし |
| form 連携 | あり（name で送信値に含む） | なし |
| JS から value で操作 | 可 | 不可（textContent のみ） |
アクセシビリティ
はデフォルトで 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 要素 — 範囲のある値（ディスク使用量等）の表示