HTML5

タグ(要素)

OUTPUT

  編集:2022.06.27 by T.A.

mdn

計算された出力値を表す。

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

フレージング内容

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

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

この要素は、前もって実行した他のプログラムの出力を引用するための適切な要素である、SAMP 要素と対比することができる。

シンプルな電卓は、計算結果の表示に対してOUTPUTを使用できる:

<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>

for属性

出力が計算された制御フォームを指定する。

計算に参加したまたは別の方法で計算に影響を与えた値を表す、計算と要素の結果の間で作られた明示的な関係を与える。指定される場合、for 属性は、順不同の一意な空白区切りトークンの集合で構成される文字列を含まなければならず、他のトークンと同一のものはなく、それぞれが同じツリーで要素の ID の値を持たなければならない。

<FORM oninput="result.value=parseInt(a.value)+parseInt(b.value)">
 <INPUT type="range" id="b" value="50">+
 <INPUT type="number" id="a" value="10">=
 <OUTPUT id=result for="a b" style="border:1px solid red;">60</OUTPUT>
</FORM>

表示結果:

60

OUTPUT要素にはvalueプロパティを持っている。

forを付けなくても動く。

form属性

FORM 要素と、この要素を関連付ける。

この属性がある場合、この属性の値は、その要素のツリーで FORM 要素の ID でなければならない。

<FORM id=IdformForm action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <OUTPUT name=NformOutput form=IdformForm>100</OUTPUT><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>
¶送信すると、サーバーCGIはデータ「NformOutput=100」が送られる?

name属性

form.elements API で使用する要素の名前。

フォームの送信や FORM 要素の elements オブジェクトで使用されるような、フォーム制御の名前を与える。属性が指定される場合、その値は空の文字列または isindex であってはならない。

isindex 以外で、name に対して任意の空でない値が許可される。ASCII 大文字・小文字不区別で一致する名前 _charset_ は特別である: value 属性のない Hidden コントロールの名前として使用される場合、送信の間 value 属性は送信文字エンコーディングから成る送信の間の値を自動的に与えられる。


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: