output 要素

4.10.13 output 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
リスト対象で、ラベル付け可能で、リセット可能で、再関連付け可能フォーム関連要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント
コンテント属性:
グローバル属性
for - この出力の計算の元となったコントロールを指定する
form - form 要素にコントロールを関連付ける
name - フォームのサブミットform.elements API で使うフォームコントロールの名前
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
status (デフォルト - 指定不要), あらゆるロール値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLOutputElement : HTMLElement {
  [PutForwards=value] readonly attribute DOMSettableTokenList htmlFor;
  readonly attribute HTMLFormElement? form;
           attribute DOMString name;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;
};

output 要素は、計算やユーザーアクションの結果を表します。

for コンテント属性は、計算結果と、計算に使われるか計算に影響される値を表す要素との関係性を明示的に作ることができます。for 属性が指定されたら、その値は、ユニークなスペース区切りトークンの非順序セットから構成される文字列を含まなければいけません。大文字と小文字は区別されます。それぞれは、同じ Document の中の要素の ID の値を持たなければいけません。

form 属性は、output 要素を明示的にフォームオーナーと関連づけるために使います。name 属性は、この要素の名前を表します。

この要素は、値モードフラグを持ちますが、これは、value または default のいずれかとなります。初期においては、この値モードフラグdefault にセットされなければいけません。

この要素はデフォルト値も持つこともできます。初期においては、デフォルト値は空文字列でなければいけません。

値モードフラグがモード default のとき、この要素のコンテンツは、この要素の値と、そのデフォルト値の両方を表します。値モードフラグがモード value のとき、この要素のコンテンツは、この要素の値のみを表し、そのデフォルト値には defaultValue IDL 属性を使ってのみアクセスすることができます。

この要素の子孫が方法を問わず変更されたら常に、値モードフラグがモード default なら、この要素のデフォルト値は、この要素の textContent IDL 属性の値にセットされなければいけません。

output 要素のリセット・アルゴリズムは、この要素の値モードフラグdefault にセットし、この要素の textContent IDL 属性を、この要素のデフォルト値にセットすることになります(ゆえに、この要素の子ノードを置き換えることになります)。

output . value [ = value ]

この要素の現在値を返します。

セットして値を変更することができます。

output . defaultValue [ = value ]

この要素の現在のデフォルト値を返します。

セットしてデフォルト値を変更することができます。

output . type

文字列 "output" を返します。

value IDL 属性は、この要素の textContent IDL 属性と同じように作用しなければいけません。ただし、セット時においては、さらに、その子ノードが変更される前に、この要素の値モードフラグvalue にセットされなければいけません。

defaultValue IDL 属性は、取得時においては、この要素のデフォルト値を返さなければいけません。セット時においては、この属性は、この要素のデフォルト値をセットしなければいけません。そして、この要素の値モードフラグがモード default であれば、この要素の textContent IDL 属性もセットしなければいけません。

type 属性は、文字列 "output" を返さなければいけません。

htmlFor IDL 属性は、for コンテント属性を反映しなければいけません。

willValidate, validity, validationMessage 属性、そして、checkValidity()setCustomValidity() メソッドは、制約バリデーション API の一部です。labels 属性は、この要素の label のリストを提供します。formname IDL 属性は、この要素の forms API の一部です。

簡単な計算なら、その計算結果の表示に output を使うことができるでしょう:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output name=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>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-output-element