<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.elementsAPI で使用されます。
<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> # the-output-element> |
ブラウザーの互換性
Loading…