--- title: ': 出力要素' slug: Web/HTML/Element/output tags: - Element - HTML - HTML forms - HTML5 - 'HTML:Flow content' - 'HTML:フローコンテンツ' - Reference - Web translation_of: Web/HTML/Element/output ---
{{HTMLRef}}

HTML の出力要素 (<output>) は、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。

コンテンツカテゴリ フローコンテンツ、記述コンテンツ、フォーム関連要素 (リスト化、ラベル付け可能、リセット可能)、知覚可能コンテンツ
許可された内容 記述コンテンツ
タグの省略 {{no_tag_omission}}
許可された親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール {{ARIARole("status")}}
許可された ARIA ロール すべて
DOM インターフェイス {{domxref("HTMLOutputElement")}}

属性

この要素にはグローバル属性があります。

{{htmlattrdef("for")}}
他の要素の {{htmlattrxref("id")}} の空白区切りのリストで、入力値が計算に使用される (または何らかの影響を与える) 要素を示します。
{{htmlattrdef("form")}}
この要素に関連付けられた (フォームオーナーである) {{HTMLElement("form")}} 要素を指定します。この値は、同じ文書内の <form> 要素の {{htmlattrxref("id")}} である必要があります。 (この属性が設定されていない場合、 <output> 要素は祖先の <form> があれば、その要素に関連づけられます。
この属性は <output> 要素を、包含する <form> に限らず文書中のどこにある <form> にも結び付けることができます。これは祖先の <form> 要素を上書きもします。
{{htmlattrdef("name")}}
要素の名前です。 {{domxref("HTMLFormElement.elements", "form.elements")}} API で使用されます。

<output> の値、名前、内容はフォーム送信の過程で送信されません。

例

以下の例では、フォームに 0 から 100 までの範囲の値を取るスライダーと、第2の値を入力できる {{HTMLElement("input")}} 要素があります。どちらかのコントロールの値が変更されるたびに、2つの値が合計された結果が <output> 要素の中に表示されます。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

{{ EmbedLiveSample('Examples')}}

アクセシビリティの考慮

多くのブラウザーでは、この要素を aria-live 領域として実装しています。これにより、支援技術は、その中に投稿された UI インタラクションの結果を発表しますが、その結果を生成するコントロールからフォーカスを外す必要はありません。

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'forms.html#the-output-element', '<output>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#the-output-element', '<output>')}} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("html.elements.output")}}