<output> 計算結果やユーザーアクションの出力欄を作成する

<output>タグの説明

<output>は、フォームの入力欄に基づいた計算やユーザーアクションの結果を表すための出力欄を定義する要素です。JavaScriptを実行して計算した結果を返してブラウザに表示する場合などに用います。

この要素は、主に<form>の中で使われますが、機能としては結果を表示するだけです。

<output>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<output>に指定できる主な属性

for

入力コントローラに付与したid属性の値を指定することで関連付けを行います。

form

<form>に付与したid属性値を指定することで関連付けを行います。

name

この要素の名前を指定します。JavaScriptからこの要素にアクセスする際に使用します。

<output>の使い方とサンプル

このタグを使ったマークアップのサンプルです。二つの入力欄の値を計算し、結果を反映しています。実際にサンプルの数値を変えて確認してみましょう。

<form oninput="add.value = Number(one.value) + Number(two.value);">
	<input type="number" name="one" value="0" size="10"> ＋ 
	<input type="number" name="two" value="0" size="10"> ＝ 
	<output name="add">0</output>
</form>