HTML の出力要素 (<output>
) は、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。
コンテンツカテゴリ | フローコンテンツ、記述コンテンツ、フォーム関連要素 (リスト化、ラベル付け可能、リセット可能)、知覚可能コンテンツ |
---|---|
許可された内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可された親要素 | 記述コンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | status |
許可された ARIA ロール | すべて |
DOM インターフェイス | HTMLOutputElement |
属性
この要素にはグローバル属性があります。
for
- 他の要素の
id
の空白区切りのリストで、入力値が計算に使用される (または何らかの影響を与える) 要素を示します。 form
- この要素に関連付けられた (フォームオーナーである)
<form>
要素を指定します。この値は、同じ文書内の<form>
要素のid
である必要があります。 (この属性が設定されていない場合、<output>
要素は祖先の<form>
があれば、その要素に関連づけられます。 - この属性は
<output>
要素を、包含する<form>
に限らず文書中のどこにある<form>
にも結び付けることができます。これは祖先の<form>
要素を上書きもします。 name
- 要素の名前です。
form.elements
API で使用されます。
<output>
の値、名前、内容はフォーム送信の過程で送信されません。
例
以下の例では、フォームに 0
から 100
までの範囲の値を取るスライダーと、第2の値を入力できる <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>
アクセシビリティの考慮
多くのブラウザーでは、この要素を aria-live
領域として実装しています。これにより、支援技術は、その中に投稿された UI インタラクションの結果を発表しますが、その結果を生成するコントロールからフォーカスを外す必要はありません。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <output> の定義 |
現行の標準 | |
HTML5 <output> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。