仕様

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

output状態, 結果の出力 (output)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • パルパブルコンテンツ
  • リストされた要素
  • リセット可能な要素
  • ラベル付け可能な要素
  • 自動大文字化継承要素
  • フォーム関連要素
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。
属性グローバル属性,
form
フォーム要素に関連付け
name
要素の名前
for
フォーム送信のコンテキストの閲覧
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		任意[既定値 : status]
DOM
インター
フェイス
HTMLOutputElement
  1. [Exposed=Window]
  2. interface HTMLOutputElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [SameObject, PutForwards=value] readonly attribute DOMTokenList htmlFor;
  6. readonly attribute HTMLFormElement? form;
  7. [CEReactions] attribute DOMString name;
  8.  
  9. readonly attribute DOMString type;
  10. [CEReactions] attribute DOMString defaultValue;
  11. [CEReactions] attribute DOMString value;
  12.  
  13. readonly attribute boolean willValidate;
  14. readonly attribute ValidityState validity;
  15. readonly attribute DOMString validationMessage;
  16. boolean checkValidity();
  17. boolean reportValidity();
  18. undefined setCustomValidity(DOMString error);
  19.  
  20. readonly attribute NodeList labels;
  21. };
レンダリング
特になし
参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
output要素は結果を表します。

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

  1. <form id="ifm01" oninput="iot01.value = iip01.valueAsNumber + iip02.valueAsNumber">
  2. <input id="iip01" type="number" value="1">
  3. <input id="iip02" type="number" value="2">
  4. </form>
  5. <output id="iot01" form="ifm01" for="iip01 iip02">output</output>
+ =
output
参照元
  1. HTML Living Standard. 4.10.12 The output element
  2. HTML 5.2 W3C 勧告. 4.10.12 The output element
  3. MDN Web Docs. HTML <output>: 出力要素

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

output要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

ラベル付け可能な要素なので、他にラベル付け可能な要素がある label要素には配置できません。

  1. <pre>
  2. <output>output</output>
  3. </pre>

フレージングコンテンツを配置できる pre要素のコンテンツの一部として、output要素を配置できます。

output

配置できるコンテンツ

フレージングコンテンツを
配置できます。

output要素は、フレージングコンテンツを配置できます。

  1. <output>
  2. <span>output</span>
  3. </output>

output要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

output

属性

form属性

  1. <form id="ifmForm" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
  2. <input id="a" type="number" value="1">
  3. <input id="b" type="number" value="2">
  4. </form>
  5. <output id="o" form="ifmForm" for="a b">output</output>

form属性は、form要素の id属性値を設定します。要素を form要素に関連付けます。省略したときは、最も近い祖先の form要素に関連付けられます。

+ =
output

name属性

  1. <form oninput="nop5.value = iip51.valueAsNumber + iip52.valueAsNumber">
  2. <input id="iip51" type="number" value="1">
  3. <input id="iip52" type="number" value="2">
  4. <output name="nop5" for="iip51 iip52">output</output>
  5. </form>

name属性は、要素の名前を指定します。form.elements APIで使用する要素の名前です。

+ = output

for属性

  1. <form oninput="iop6.value = iip61.valueAsNumber + iip62.valueAsNumber">
  2. <input id="iip61" type="number" value="1">
  3. <input id="iip62" type="number" value="2">
  4. <output id="iop6" for="iip61 iip62">output</output>
  5. </form>

for属性は、他の要素の id の空白区切りのリストを指定します。for属性を使用すると、計算の結果と、計算に使用された値または計算に影響を与えた値を表す要素との間に明示的な関係を作成できます。

+ = output

気を付ける点

リセット可能

  1. <form oninput="idv7.textContent = iop7.value = iip71.valueAsNumber + iip72.valueAsNumber">
  2. <input id="iip71" type="number" value="1"> +
  3. <input id="iip72" type="number" value="2"> =
  4. <output id="iop7" for="iip71 iip72">output</output>
  5. <div id="idv7">div</div>
  6. <button type="reset">reset</button>
  7. </form>

output要素は、リセット可能なフォーム関連要素です。フォーム要素がリセットされたときにリセットされます。

+ = output
div