HTMLリファレンス

Tweet

output要素は計算結果をマークアップするための要素です。

例えば次のように指定することでinput[name=”a”]とinput[name=”b”]を足した値をoutput要素に出力します。

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
	<input name="a" type="number" step="any"> +
	<input name="b" type="number" step="any"> =
	<output name="o" for="a b"></output>
</form>

output要素はあくまで計算結果をマークアップするための要素であり、フォーム送信時にその値を送信したりJavaScriptに頼らず自身で計算式を実行することはできません。

output要素はグローバル属性以外に以下の属性を取ることができます。

for属性

for属性で計算に利用する要素との関連付けが可能です。値にはid属性またはname属性の値を半角スペース区切りで複数指定可能です。

<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o" for="a b"></output>

from属性

from属性を利用してform要素と関連付けることができます。

<form id="form01">
	<input name="a" type="number" step="any"> +
	<input name="b" type="number" step="any"> =
</form>
<output name="o" for="a b" from="form01"></output></code>

<output name="o"></output>