output要素

このエントリーをはてなブックマークに追加

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>

name属性

name属性output要素に名前をつけることができます。あくまで名前が付けられるだけであって値がフォーム送信時に値は送信されません。

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

参考URL

4.10.13 The output element - HTML5 - W3C
4.10.13 The output element - HTML5.1 - W3C

登録日 : 2015年02月01日 最終更新日 : 2015年10月13日

同じカテゴリー(フォーム)のエントリー

Copyright © 2012-2013 to-R All Rights Reserved.