[55] 計算結果の出力欄を作ろう output要素

<output>要素は、計算などの結果の出力（output）のための要素です。

<input>要素の input（インプット）は「入力」という意味ですが、これはその反対のアウトプットで「出力」という意味。HTML5 からの新要素です。

計算などのユーザーの操作は主に JavaScript で行い、その結果を挿入する（表示する）役目です。

W3Cの <output>要素のページにも、The output element represents the result of a calculation.（output要素は計算の結果を表示する）と書いてあります。

こんなかんじ。数字を入力して計算結果が出るピンクの部分が <output>要素です。

+ =

0

<output>要素は、残念ながらIEだけ未対応。その他のブラウザは Edge も含め対応しています。

使用する要素	<output> 〜 </output>

<output>の属性	name：部品に固有の名前を付ける。
	for：フォーム部品の id名を呼び出す
	form：親の<form>のID名を呼び出して関連づける
	グローバル属性

<outoput>は、デフォルトのスタイルは無しです。
CSSを何も指定していないと、こんな ↓ かんじ。（計算結果の表示部分が<output>）

＋ ＝

0

このページのサンプルは、<output>の部分が分かりやすいようにCSSで背景色などをつけていますよ。

<output>を使ってみよう。まずはname属性を使用

name属性を使う方法で、計算結果を表示してみましょう。
name属性の値によって、数値を入力する部品や<output>要素を特定します。

●サンプル1

冒頭の「足し算のサンプル」のHTMLソースはこのようになっています。

<form oninput="op1.value = Number(a.value) + Number(b.value);">
<input type="number" name="a" value="0" size="5"> ＋ 
<input type="number" name="b" value="0" size="5"> ＝ 
<output name="op1">0</output>
</form>

それぞれの入力部品のname属性の値を、<form>要素内に書いた JavaScript で呼び出して計算し、<form>要素の oninputイベントハンドラで、計算結果を<outout>の値として返しています。
数字の入力と同時に計算結果が表示される指定です。
oninputイベントハンドラ は入力時の処理を指定します。

＋ ＝

0

●サンプル2
サンプル1では入力と同時に計算結果が表示されますが、ボタンを押して計算結果を表示させることもできます。

× ＝

0

<form>
<input type="number" name="a" value="0" size="10"> × 
<input type="number" name="b" value="0" size="10"> ＝ 
<output name="op1">0</output>
<input type="button" onclick="op1.value = Number(a.value) * Number(b.value);" value="計算する">
</form>

サンプル1で<form>に指定していた oninputイベントハンドラの代わりに、
ボタン<input type="button">の onclickイベントハンドラで計算結果を返しています。
onclickイベントハンドラは、クリック時 の処理を指定します。

サンプル1、2 では、<form>の中か、ボタン部品の中で、計算式を作っています。
で、<output>要素の中で作れないかと探したら、1つ onforminputイベントハンドラを使う方法はあったのですが、この forminputイベントとformchangeイベントは、もう廃止されたんだそうです。（なので今はOperaくらいしかプレビューしません）
↓ こちらの4項に廃止の件が書かれています。（2011年の4月までには廃止されたようです）
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP

で、意味は無いですが、せっかくサンプルを作ったので（笑）HTMLソースだけ書いておきます。

<!--このソースは使えません-->
<form>
<input type="number" name="a" value="0" size="10"> ÷ 
<input type="number" name="b" value="0" size="10"> ＝ 
<output onforminput="value= Number(a.value) / Number(b.value);">0</output>
</form>

id属性・for属性を使って出力する方法もあります

数値のフォーム部品（ここでは<input type="number">）にid属性で名前をつけ、
<outprt>のfor属性で関連づけます。for属性は出力元のフォーム部品を明確に示すためのものです。

●サンプル3
まずは、<form>要素の oninputイベント で、数字の入力と同時に計算結果を出します。

＋ ＝

計算結果

<form oninput="document.getElementById('op3').value =
parseInt(document.getElementById('na').value, 10) +
parseInt(document.getElementById('nb').value, 10)">
<input type="number" id="na"> ＋
<input type="number" id="nb"> ＝
<output for="na nb" id="op3">計算結果</output>
</form>

<form>の oninputイベントで、id属性を使って各要素のvalue値を呼び出して計算し、<outout>の値として返しています。
<outprt>のfor属性は「半角スペース」で区切って複数指定できます。

●サンプル4
id属性を使って、ボタンの要素のonclickイベント で、計算結果を出すサンプルです。

× ＝

計算結果

<form>
<input type="number" id="na4"> ×
<input type="number" id="nb4"> ＝
<output for="na4 nb4" id="op4">計算結果</output>
<input type="button" onclick="document.getElementById('op4').value =
parseInt(document.getElementById('na4').value, 10) *
parseInt(document.getElementById('nb4').value, 10)" value="計算する">
</form>

<input type="button">の onclickイベントで、id属性を使って各要素のvalue値を呼び出して計算し、<outout>の値として返しています。
<outprt>のfor属性は「半角スペース」で区切って複数指定できます。

もうちょっと実用性のある計算を

「消費税計算」とか「注文ページの合計金額」とか、実用性のあるサンプルを考えてみました。

●サンプル5
消費税率を入力して税込み価格を出力させます。

税ぬき価格 ×
消費税額 ％ =
税込み価格：¥

0

<form oninput="incl.value = Math.round(Number(prc.value) * Number(tax.value) /100 + Number(prc.value));">
税ぬき価格 <input type="number" name="prc" value="0" size="10"> × 
消費税額 <input type="number" name="tax" value="5" size="5"> ％ = 
税込み価格：¥<output name="incl">0</output>
</form>

計算式を変えただけです。Math.round() は Math.round関数といって小数点以下を四捨五入します。この「( )」の中で、税抜き価格（prc）に消費税率（tax 割る100）を掛けて、最後に税抜き価格を足しています。
Math.round関数で端数を四捨五入した値を <output>に（incl）返しています。
ちなみに、
小数点以下を切り上げたい場合は、Math.ceil() を、
小数点以下を切り捨てたい場合は、Math.floor() を使います。

●サンプル6
商品数を入力して合計金額を出力させます。このサンプルは<datalist>要素も使っています。

オリジナルハガキ（1枚118円）
＊100, 200, 500, 1000枚のいずれかをお選びください
ご注文枚数： 枚 =
合計金額：¥

0

<form oninput="total.value = 118 * Number(pieces.value);">
<b>オリジナルハガキ（1枚118円）</b><br />
<small>＊100, 200, 500, 1000枚のいずれかをお選びください</small><br />
ご注文枚数：
<input type="text" name="pieces" min="100" max="1000" list="numlist" 
size="10" placeholder="ダブルクリック">
<datalist id="numlist">
<option value="100"></option>
<option value="200"></option>
<option value="500"></option>
<option value="1000"></option>
</datalist>
枚 = <span>合計金額：¥<output name="total">0</output></span>
<input type="submit" value="注文する" />
</form>

これも計算式を変えただけ。単純に、単価×枚数の計算結果を<output>に返しています。<datalist>でリストを出してユーザに選択してもらいます。

レンジと組み合わせる

レンジを表す<input type="range">との組み合わせのサンプルです。

●サンプル7
レンジのスライダーを動かすと、選んだ数値が<output>で表示されます。

評価（1〜10）：

6

<form oninput="op1.value = Number(a.value);">
評価（1〜10）： <input type="range" name="a" min="1" max="10">
<output name="op1">6</output>
</form>

サンプル1 と同じように、それぞれの部品にname属性で名前を付けて値を呼び出しています。<form>の oninputイベントで、レンジの入力結果を<outout>の値として返しています。アンケートとかに使えそうですね。

テキストも入力結果を表示できる

テキスト入力用の<input type="text">でも、入力結果を<output>で表示する事ができました。
ということは、同じテキスト入力部品の type= search、tel、url、emailも可能ということですね。

W3Cは「...represents the result of a calculation（計算結果を表示する）」と言っているので、邪道かも？ですが、とにかくブラウザがプレビューします（笑）。

●サンプル8

いらっしゃいませ　

お客

様！

<script>
function welcome(ctrl){
	var h = document.getElementById('hello');	
	h.value = ctrl.value;
}
</script>
<form>
<p>
いらっしゃいませ　<output id="hello">お客</output>様！
</p>
<input type="text" name="yourName" placeholder="お名前を入力" />
<input type="button" value="押してください" onclick="welcome(yourName)"/>
</form>

ここではまず、JavaScriptでwelcome(ctrl) という任意の関数を作っています。
この中で、id名（hello）を付けた<output>の、value値が置き換えられるように指定します。
<form>の中では、テキスト入力部品の<input>要素にname属性で名前（yourName）をつけておき、ボタン部品のonclickで、welcome(yourName)と関数を呼び出して、<output>のvalue値をyourNameに置き換えています。

次回予告

次回は<meter>要素です。これもHTML5からできた新しい要素です。
<meter>要素は、特定の範囲内でどの位置（分量）かを表示するための要素です。
範囲の中を「低・中・高」と分けたり「最適」な範囲を決めて表示します。