HTML

<output> 計算結果

詳細を開く 詳細を閉じる

計算結果 : <output>

  • <output>要素は、計算結果を表します。
  • HTML5で追加された機能です。
  • 計算する式は、<form>要素の「oninput」イベントで指定します。
  • <input type="range">要素では、現在の設定値が表示されません。よって、これを表示するために良く使われます。
  • 初期画面では表示されていませんが、スライダーを左右に移動してみましょう。スライダーの右側に現在の値が表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET"
	oninput="o.value=parseInt(r.value)">

	<input type="range" name="r">
	<output name="o"></output>
	<input type="submit" value="送信">

</form>
  • 以下の例は、入力された2つの数字の積を<output>要素に表示します。
  • 初期画面では表示されていませんが、テキストボックスの値を変更してみましょう。送信ボタンの左側に計算結果が表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET"
	oninput="o.value=parseInt(n1.value) * parseInt(n2.value)">

	<input type="number" name="n1"
		   value="10"><br>
	× 	<input type="number" name="n2"
			  value="10"><br>
	= <output name="o"></output>
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ