output 要素計算の結果出力を表す

output 要素は計算の結果出力を表します。何らかの計算をした結果を、この要素で出力します。

クライアントサイドスクリプトで出力結果を output 要素に与えるのが前提の要素のため、JavaScript が実行できない環境では出力の表示ができません。その場合は、output 要素の内容が表示されます。

詳細説明

output 要素に指定可能な属性は下記の通りです。

属性 概要
form 属性 任意の form 要素に付与した id 属性値を指定することで、そのフォームと output 要素を関連付けます。
for 属性 入力コントロールに付与した id 属性値を指定することで、output 要素と入力コントロールを関連付けます。
name 属性 output 要素に名前を付与します。JavaScript から要素にアクセスする際に使用しますが、id 属性を使用するのがよいでしょう。

動作サンプル

対応するブラウザでは、入力欄の数値に応じて、計算結果が output 要素に出力されます。

+
=
50

output 要素のサンプルソース

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input name="a" id="a" type="number" /> +
 <input name="b" id="b" type="number" /> =
 <output name="o" id="o" for="a b"></output>
</form>

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.10.12 The output element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ