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

今回の <output> 要素は、計算などの結果の出力欄のための要素です。
<input>要素の input (インプット) は「入力」という意味ですが、これはその反対のアウトプットで「出力」という意味。
HTML5 からの新要素です。

これ、ブラウザ上で計算結果が出せて、かなりオモシロイですが、
計算は JavaScript でするし、結果の値を送信するわけでもなく、ただ表示するだけの役目です。

W3Cの <output>要素のページを見ても、
The output element represents the result of a calculation.(output要素は計算の結果を表示する)だって。

こんなかんじのモノです。数字を入力すると計算結果が出るピンクの部分が <output>要素です。
(Chrome か Opera、Firefoxで見てね)

+ = 0
使用する要素 <output> 〜 </output>
<output>の属性 name:部品に固有の名前を付ける。
for:フォーム部品の id名を呼び出す
form:親の<form>のID名を呼び出して関連づける
グローバル属性

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

0

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

あと、<output> と一緒に使えるモノは、
数値を表す<input type="number"><input type="range">だけかと思ったのですが、
テキスト入力の<input type="text">でも、入力結果を表示
できました。
こんなかんじです ↓ (もしかしたらW3C的には非推奨かもしれないけど。今のところブラウザは表示しちゃいます)

いらっしゃいませ お客様!

名前が入れ替わる部分が<output>でできています。ソースは「サンプル8」をご覧ください。

<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="10"> + 
<input type="number" name="b" value="0" size="10"> = 
<output name="op1">0</output>
</form>

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

ちなみに、下のサンプルは、冒頭のサンプルに「送信ボタン」を設置したもの。
送信ボタンを押して、ブラウザの「アドレスバー」を見ると、入力フィールドの値は送られるけど、<output>からは何も送られていないのがわかるはず。ホントに表示だけの要素ですね。(ということで、この ↓ 送信ボタンに意味はありません)

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>要素も使っています。

<form oninput="total.value = 118 * Number(pieces.value);">
<b>オリジナルハガキ(1枚118円)</b><br />
<small>*100, 200, 500, 1000枚のいずれかをお選びください</small><br />
ご注文枚数:
<input type="number" 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>要素は、特定の範囲内でどの位置(分量)かを表示するための要素です。
範囲の中を「低・中・高」と分けたり「最適」な範囲を決めて表示します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

初めまして

こちらのブログを参照し、私のブログにも入力欄からの計算結果出力の表示に成功しました。
大変感謝しております。

一つ質問させてください。
読者に文字列を選択してもらって、それを数値として認識し、
計算結果として出力することは可能なのでしょうか?

例えば、、、

選択欄にりんご、みかん、バナナという選択肢があった場合、

りんごは600、みかんは300、バナナは150と認識し、
それを計算式に組み込んで計算結果として出力する。

説明が下手ですみませんが、もしご教授頂けるようでしたら宜しくお願い致します。

Re: 初めまして

はいつさん
もちろん可能でしょうねぇ。
計算式は JavaScript で記述します。
<output>要素はその結果を表示するための要素です。

JavaScript に関しては私はサッパリ..なので、どなたか詳しい人に聞いてみてくださいね。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.