HTML <output> 出力要素

属性

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

for

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

form

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

この属性は <output> 要素を、包含する <form> に限らず文書中のどこにある <form> にも結び付けることができます。これは祖先の <form> 要素を上書きもします。フォームが送信されるとき、<output> 要素の名前とコンテンツは送信されません。

name

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

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

アクセシビリティ

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

例

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

<form id="example-form">
  <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>

const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];

function updateResult() {
  const aValue = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();

結果

技術的概要

仕様書

ブラウザーの互換性