<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>
要素の中に表示されます。
<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 操作の結果を読み上げますが、その結果を生成するコントロールからフォーカスを外す必要はありません。
仕様書
Specification |
---|
HTML Standard # the-output-element |
ブラウザーの互換性
BCD tables only load in the browser