outputタグとは?|計算結果の出力欄を作る

outputタグとは?|計算結果の出力欄を作る
博士
今回は、フォーム内の計算結果を表す<output>タグについて解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<output>タグとは

 

<output>

対応ブラウザ Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / フォーム関連要素(リスト化可能要素、リセット可能要素、再関連付け可能要素、ラベル付け可能要素) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが期待される場所
内容 フレージング・コンテンツ


 
 
<output>タグは、フォーム内のなんらかの計算結果を表す際に使用します。
実際に計算結果を出力させる場合は、JavaScriptなどのスクリプトが必要です。
 
 
博士
あくまで出力だけを目的とした要素であるため、計算結果がフォーム送信されることはないぞ。
 
 

for属性

計算に使われるフォーム部品のid属性を指定することで、フォーム部品とoutput要素を関連付けます。
for属性の値は、半角スペースで区切って複数指定することも可能です。

 
 
for属性がなくても計算結果を出力することは可能ですが、フォーム部品と計算結果の関連性を明確に表したい場合に使用します。
 
 

スポンサーリンク

form属性

計算結果の出力欄をどのform要素に関連付けるかを指定します。

form属性の値には、対応するform要素に指定したID名を記述します。

 
 
博士
この機能に対応していないブラウザもあるので注意が必要じゃ。
 
 

name属性

出力欄を識別するための名前を指定します。
指定した名前は、スクリプトから参照する際に使用する場合があります。

 
 

スポンサーリンク

使用例

 
 

表示例

+ =

 
 

まとめ

フォームの計算結果を表す際は、<output>タグを使用します。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








outputタグとは?|計算結果の出力欄を作る