<output>: 出力要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年10月⁩.

<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" name="b" value="50" /> +  <input type="number" name="a" value="10" /> =  <output name="result" for="a b">60</output></form>

結果

アクセシビリティの考慮

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

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