<output>: 出力要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

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

属性

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

for

他の要素の id の空白区切りのリストで、入力値が計算に使用される(または何らかの影響を与える)要素を示します。

form

この要素に関連付けられた (フォームオーナーである) <form> 要素を指定します。この値は、同じ文書内の <form> 要素の id である必要があります。 (この属性が設定されていない場合、 <output> 要素は祖先の <form> があれば、その要素に関連づけられます。

この属性は <output> 要素を、包含する <form> に限らず文書中のどこにある <form> にも結び付けることができます。これは祖先の <form> 要素を上書きもします。

name

要素の名前です。 form.elements API で使用されます。

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

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

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

結果

アクセシビリティの考慮

多くのブラウザーでは、この要素を aria-live 領域として実装しています。これにより、支援技術は、その中に出力された UI 操作の結果を読み上げますが、その結果を生成するコントロールからフォーカスを外す必要はありません。

コンテンツカテゴリー フローコンテンツ記述コンテンツリスト化ラベル付け可能リセット可能 フォーム関連要素、知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可された親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール status
許可された ARIA ロール すべて
DOM インターフェイス HTMLOutputElement

仕様書

Specification
HTML
# the-output-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
output
for
form
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support