HTMLのFormタグを使って計算をする

こんにちは、Azusaです♪

本日は、HTMLのFormタグを使って簡単な計算フォームを作ってみようと思います。

実験室.の方でギターのトーンに関する記事を書いたのですが、周波数を計算するのに毎回手作業では面倒だなと思い、その勢いでこの記事を書くことにしました笑

以前だと、計算結果の表示等にはJavaScript等を使って計算をして表示をしていたと思うのですが、HTML5のFormではoninput属性の中で計算式を指定して計算することができ、更にoutputという要素が追加され、対応ブラウザではその場で計算結果を表示することが出来るようになっています。

下記に足し算をするフォームの例を紹介いたします。

<form oninput="result.value = Number(a.value) + Number(b.value);">
<input type="number" name="a" value="0"> + <input type="number" name="b" value="0"> = <output name="result">0</output>
</form>

これをブラウザで表示すると、

0

上記フォームは数字を入力したりすると自動で計算して結果が表示されます。

1行目から説明していきます。

まず、Formタグでフォームを作ることを明示します。

oninput属性はフォーム内の入力欄のいずれかに入力があった場合に実行される処理を記述しています。

上記例の場合ですと、

result.value = Number(a.value) + Number(b.value);

という処理をすると指定しています。

result, a, bという3つの文字列は、次の行で記述しているinputタグ及びoutputタグで指定されているname属性に対応していますので、双方を合わせていればどんな名前をつけてもOKです。

処理の内容としては、”aの値とbの値を足した値をresultの値に入れる”というものです。

“a.value”がaの値を表しており、b, resultについても同様です。

a.value, b.valueを囲んでいる”Number()”については、数値であることを明示して入力されている文字列を数値として認識させるために必要なものです。

“Number()”を外してしまうと、数値ではなく文字列だと認識されて、a, bの数字をつなげただけのものが出力されるので注意しましょう!

次に2行目の各要素の表示部分を見ていきます。

<input type="number" name="a" value="0"> + <input type="number" name="b" value="0"> = <output name="result">0</output>

まずinputタグ2つで数値の入力欄を、outputタグ1つで結果の出力欄を表示させています。

間にある”+”や”=”はそのまま出力されるだけです。

inputタグに指定されているtype属性は、入力する文字列の種類を指定しています。

今回の場合、”number”が指定されていますが、この場合は数値に使われる文字列以外のものは入力できなくなります。

基本的には数字のみですが、”-“(マイナス)や”.”(小数点)等の数値を表す際に使われる文字列も入力可能です。

そしてname属性には各要素の識別名を入力します。

Formタグのoninput属性で使用したものと対応させるように指定しないと、うまく動きませんので注意が必要です。

最後にvalue属性ですが、これは初期値を指定するもので、指定しなかった場合の初期値は空欄になります。

outputタグも上記と同じですが、結果を表示するためだけのものなので、名前だけつけてあげてFormタグのoninput等で処理を指定した際に、結果の入れ物として指定してあげると結果が表示されます。

そして最後の行でFormタグを閉じて終わりです。

今回は足し算のみの紹介でしたが、”-“, “*”, “/”を使って引き算・掛け算・割り算等も出来ますし、入力フォームを増やしたりすることでより複雑な計算も出来るので、いろいろ試してみると面白いと思います。

他の言語を扱わなくてもこうやって計算ができるのは本当に便利ですね♪

というわけで、本日はHTMLのFormタグで簡単な計算フォームを作ってみました。

また次の記事で~ノシ

コメントを残す