<output> …… 実行結果の出力を表す

<output>タグは、実行結果の出力を表す際に使用します。

output要素は、アプリケーションによって実行された計算の結果、または、ユーザーのアクションの結果を表します。

■属性

output要素のfor属性の値に要素のid名を指定すると、 出力の計算元となった要素を明示的に示すことができます。 複数の計算元を示す場合には、for属性の値をスペース区切りで指定します。

output要素のform属性の値にform要素のid名を指定すると、 関連しているform要素を明示的に示すことができます。 尚、output要素はフォームに関連付けられていますが、output要素の値自体はフォーム送信時に送信されません。

■使用例

以下のサンプルは、2つの数値を加算するシンプルなスクリプトです。 output要素を使用して計算結果を表しています。 output要素のfor属性の値には、計算元となる2つの要素のid名をスペース区切りで指定しています。

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

■使用例

以下のサンプルは、 他サーバーで実行された計算結果を受信したときに、 output要素として出力するよう指定しています。

<output id="result"></output>
<script>
 var primeSource = new WebSocket('ws://primes.example.net/');
 primeSource.onmessage = function (event) {
   document.getElementById('result').value = event.data;
 }
</script>

samp要素とoutput要素の違い

samp要素とoutput要素の違いについて考えてみます。

samp要素は、「（想定では）こんな結果になります」という出力サンプルを表します。 以前に実行された実行結果をサンプルとして引用するのに適しています。

output要素は、いま出力された内容そのものを表します。 実行された計算などの出力そのものを表すのに適しています。

• samp要素 …… プログラムを実行した場合の“結果サンプル”です。
• output要素 …… プログラムを実行した結果の“出力そのもの”です。

■関連項目

Sponsors