ウェブランサー

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

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
親にできる要素 フレージング・コンテンツが期待される場所
子にできる要素 フレージング・コンテンツ
対応ブラウザ <output>の対応状況を確認する

<output>タグの説明

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

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

<output>タグの特徴

<output>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

<output>タグに指定できる属性

for属性
入力コントロールに付与したid属性値を指定することで関連付けを行います。
form属性
form要素に付与したid属性値を指定することで関連付けを行います。
name属性
output要素に名前を指定します。JavaScriptからこの要素にアクセスする際に使用します。

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

<output>を使ったマークアップのサンプルです。

HTML
<form oninput="vop.value = Number(a.value) + Number(b.value);">
	<input type="number" name="a" value="0" size="10"> + 
	<input type="number" name="b" value="0" size="10"> = 
	<output name="vop">0</output>
</form>
表示確認
0

<output>に関連するHTMLタグ

入力フォームに関連する要素
<command> ページ内のメニューに操作コマンドを設定する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する
<fieldset> フォームの入力項目をグループ化する
<form> フォームを作成する
<input> フォームを構成する部品を作成する
<label> フォームの入力項目と項目名を関連付ける
<legend> 入力項目グループにタイトルを付ける
<meter> 規定範囲内の数量や測定値を表す
<optgroup> セレクトボックスの選択肢をグループ化する
<option> セレクトボックスの選択肢を作成する
<output> 計算結果やユーザーアクションの出力欄を作成する
<progress> 作業の進捗状況を示すプログレスバーを表示する
<select> セレクトボックスを作成する
<textarea> 複数行のテキストエリアを作成する