HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<output>
出力（Output）要素。フォーム内での計算結果や、ユーザーアクションの結果を表示するために使用されます。
info
概要
<output> 要素は、主にクライアント側スクリプト（JavaScript）によって計算結果やユーザーの操作結果が挿入される、コンテナとして機能します。フォーム内の要素と関連付け、結果を表示する用途に設計されています。
play_circle
デモ (静的表示)
HTML (Source)
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>
Preview (Result)
※プレビューでは動作しません
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| for | 計算に使用された、または結果に影響を与えた他の要素のID（複数可）を指定します。スペース区切りで複数指定できます。 |
| form | 要素が属する <form> 要素の ID を指定します。この属性を使用すると、<output> 要素を <form> タグの外に配置できます。 |
| name | フォーム送信時に要素を参照するための名前。通常、計算結果を送信する必要がある場合に使用しますが、<output>の値が実際にサーバーに送信されることは稀です。 |
code
実用例
1. スライダーの値をリアルタイム表示
<!-- range入力の値をoutputに表示 -->
<input type="range" id="volume" min="0" max="100" oninput="rangeValue.value = volume.value">
<output name="rangeValue" for="volume">50</output>
2. フォーム外での結果表示
<!-- form要素とoutput要素をIDで関連付ける -->
<form id="myform">
<input type="text" id="input_data">
</form>
<label for="output_data">入力された値の長さ:</label>
<output form="myform" name="output_data">0</output>
<!-- JavaScriptでoutput_dataに結果をセットする -->
3. 複数の入力値の合計表示
<form oninput="total.value = parseInt(v1.value) + parseInt(v2.value)">
<input type="number" id="v1"> +
<input type="number" id="v2"> =
<output name="total" for="v1 v2">0</output>
</form>
lightbulb
知っておくべき重要事項
javascript
JavaScriptとの連携
<output> 要素は単体では結果を表示しません。通常、親となる <form> 要素の oninput イベントハンドラや、個別の <input> 要素の oninput イベント、またはJavaScriptの関数を使用して、結果の文字列を <output> 要素の value プロパティに設定する必要があります。
accessibility_new
アクセシビリティ
<output> 要素を使用すると、スクリーンリーダーに対して結果が更新されたことを適切に伝えることができます。aria-live="polite" のような属性を明示的に指定する必要はありません（ブラウザが自動的に処理します）。