---
title: HTMLOutputElement
slug: Web/API/HTMLOutputElement
tags:
  - API
  - HTML DOM
  - Interface
  - Reference
  - インターフェイス
translation_of: Web/API/HTMLOutputElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLOutputElement</code></strong> インターフェイスは、 ({{domxref("HTMLElement")}} から継承したものより詳細に) {{HTMLElement("output")}} 要素のレイアウトと表示を操作するためのプロパティやメソッドを提供します。</p>

<p>{{InheritanceDiagram(600, 120)}}</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<p><em>このインターフェイスは、親である {{domxref("HTMLElement")}} からプロパティを継承しています。</em></p>

<dl>
 <dt>{{domxref("HTMLOutputElement.defaultValue")}}</dt>
 <dd>{{domxref("DOMString")}} で、要素の既定値を表し、初期値は空文字列です。</dd>
 <dt>{{domxref("HTMLOutputElement.form")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("HTMLFormElement")}} で、コントロールに関連付けられたフォームを表し、定義されていれば HTML の {{htmlattrxref("form", "output")}} 属性を反映します。</dd>
 <dt>{{domxref("HTMLOutputElement.htmlFor")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("DOMTokenList")}} で、 HTML の {{htmlattrxref("for", "output")}} 要素を反映し、計算値の <code>value</code> に貢献 (または他の形で影響) する同じ文書内の他の要素の ID のリストが入ります。</dd>
 <dt>{{domxref("HTMLOutputElement.labels")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("NodeList")}} で、この要素に関連付けられた {{HTMLElement("label")}} 要素です。</dd>
 <dt>{{domxref("HTMLOutputElement.name")}}</dt>
 <dd>{{domxref("DOMString")}} で、 HTML の {{htmlattrxref("name", "output")}} 属性を反映し、フォームデータと共に送信されるコントロールの名前が入ります。</dd>
 <dt>{{domxref("HTMLOutputElement.type")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("DOMString")}} で "<code>output</code>" です。</dd>
 <dt>{{domxref("HTMLOutputElement.validationMessage")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (<code>willValidate</code> が <code>false</code> の場合) や、制約を満たしている場合は空文字列になります。</dd>
 <dt>{{domxref("HTMLOutputElement.validity")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("ValidityState")}} で、この要素がある妥当性の状態を表します。</dd>
 <dt>{{domxref("HTMLOutputElement.value")}}</dt>
 <dd>{{domxref("DOMString")}} で、要素の内容の値を表します。 {{domxref("Node.textContent")}} プロパティと同様です。</dd>
 <dt>{{domxref("HTMLOutputElement.willValidate")}}{{ReadOnlyInline}}</dt>
 <dd>{{jsxref("Boolean")}} で、要素が制約検証の対象になるかどうかを示します。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<p><em>このインターフェイスは、親である {{domxref("HTMLElement")}} からメソッドを継承しています。</em></p>

<dl>
 <dt>{{domxref("HTMLOutputElement.checkValidity()")}}</dt>
 <dd>要素の妥当性をチェックし、チェック結果を {{jsxref("Boolean")}} で返します。</dd>
 <dt>{{domxref("HTMLOutputElement.reportValidity()")}}</dt>
 <dd>このメソッドは、もしあれば、要素の制約に関する問題をユーザーに報告します。問題があれば、要素上で {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを発生させ、 <code>false</code> を返します。問題がなければ <code>true</code> を返します。</dd>
 <dd>問題が報告された場合、ユーザーエージェントは要素にフォーカスを移し、文書のスクロール位置を変更したり、他の動作を行ったりして要素にユーザーの関心を集めることがあります。この要素に複数の問題が同時に発生した場合、ユーザーエージェントは複数の制約検証を報告することがあります。要素が表示されない場合、ユーザーエージェントはユーザーに通知する代わりに実行中のスクリプトにエラーを報告することがあります。</dd>
 <dt>{{domxref("HTMLOutputElement.setCustomValidity()")}}</dt>
 <dd>独自の検証メッセージをフィールドセットに設定します。メッセージが空文字列でなければ、フィールドセットには独自の検証エラーが発生している状態であり、検証に合格していません。</dd>
</dl>

<h2 id="Modes" name="Modes">モード</h2>

<p>この要素は2つのモードのどちらかで動作します。<em>既定</em>モードと<em>値</em>モードです。</p>

<h3 id="Default_mode" name="Default_mode">既定モード</h3>

<p>最初は、要素は既定モードであり、要素の中身は要素の値と既定値の両方を表します。</p>

<p>要素が既定モードである場合、何らかの形で要素の子孫が変更されたとき、 <code>defaultValue</code> プロパティは {{domxref("Node.textContent","textContent")}} プロパティの値が設定されます。</p>

<p>フォームをリセットすると、要素は既定モードになり、 {{domxref("Node.textContent","textContent")}} プロパティに <code>defaultValue</code> プロパティの値が設定されます。</p>

<h3 id="Value_mode" name="Value_mode">値モード</h3>

<p>要素は <code>value</code> プロパティの内容が設定されたときに、値モードへと移行します。 <code>value</code> プロパティはそれ以外は {{domxref("Node.textContent","textContent")}} プロパティと同様の動作をします。要素が値モードである場合、既定値には <code>defaultValue</code> プロパティからしかアクセスできません。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmloutputelement", "HTMLOutputElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "forms.html#the-output-element", "HTMLOutputElement")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-output-element", "HTMLOutputElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.HTMLOutputElement")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>このインターフェイスを実装している HTML 要素: {{ HTMLElement("output") }}</li>
</ul>