【簡単】HTMLとJavaScriptで作る計算フォームの作り方

こんな疑問を解決していきます。

ブログで簡単な計算フォームなどを表示させたい時、プラグインを使わずに記事作成画面のHTML編集のみで済ませたいと思っている方は多いと思います。

僕も先日「カロリー計算用のフォーム」を作る機会があり、作り方を色々と調べていました。

今回は、CSSファイルやPHPファイルなどを編集せずに、記事作成画面のHTML編集のみで作成できる計算フォームの作り方を紹介していきます。

作成する計算フォームとコードの紹介

今回は僕が作成したカロリー計算用のフォームを例に紹介していきます。

完成版は以下のような見た目になります。

体重(kg)：

体脂肪率(%)：

徐脂肪体重(kg)：

摂取可能カロリー(kcal)：

タンパク質(g)：

脂質(g)：

炭水化物(g)：

機能について簡単に説明しておくと、体重と体脂肪率を入力して計算ボタンをクリックすると、徐脂肪体重と一日に必要なカロリー・各栄養素を計算して表示してくれる計算フォームです。

試しにご自身の体重と体脂肪率を入力して「計算」ボタンを押してみてください。

以下の計算式による結果が各出力ボックスに表示されると思います。

計算フォームの作り方【コピペでOK】

今回作成する計算フォームはコピペで簡単に実装できます。

記事の編集画面で、ブロックのメニューから「カスタムHTML」を選択し、以下のコードをコピペしてください。

<style>
.diet_form {
    background: #eaf4ff;
    padding: 10px 30px;
}

form dl dt {
    width: 200px;
    height: 40px;
    padding: 10px 0;
    line-height: 40px;
    float: left;
}

form dl dd {
    padding: 10px 0;
    margin: 0;
}

.box {
    box-sizing: border-box;
    width: 150px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
}

.calc-btn {
    width: 80px;
    height: 30px;
    border: 1px solid #333;
}

.calc-btn:hover {
    cursor: pointer;
}
</style>


<form class="diet_form">
    <dl>
        <dt>体重(kg)：</dt>
        <dd><input type="number" class="box" name="weight"></dd>
        <dt>体脂肪率(%)：</dt>
        <dd><input type="number" class="box" name="bfp"></dd>

        <p><input type="button" class="calc-btn" onclick="calc(weight.value, bfp.value);" value="計算"></p>

        <dt>徐脂肪体重(kg)：</dt>
        <dd><input id="lean" class="box" type="text" readonly=""></dd>
        <dt>摂取可能カロリー(kcal)：</dt>
        <dd><input id="cal" class="box" type="text" readonly=""></dd>
        <dt>タンパク質(g)：</>
        <dd><input id="protein" class="box" type="text" readonly=""></dd>
        <dt>脂質(g)：</dt>
        <dd><input id="fat" class="box" type="text" readonly=""></dd>
        <dt>炭水化物(g)：</dt>
        <dd><input id="carbo" class="box" type="text" readonly=""></dd>
    </dl>
</form>

<script>
    function calc(weight, bfp) {
        const lean_value = document.getElementById('lean').value = Math.round((weight - (weight * (bfp / 100))) * 100) / 100;
        const cal_value = document.getElementById('cal').value = Math.round(lean_value * 40);
        const protein_value = document.getElementById('protein').value = Math.round(lean_value * 2);
        const fat_value = document.getElementById('fat').value = Math.round(lean_value * 0.9);
        const carbo_value = document.getElementById('carbo').value = Math.round((cal_value - (protein_value * 4) - (fat_value * 9)) / 4);
    }
</script>

1点注意点として、style.cssなどのスタイルシートに以下のコード内に書かれている要素やクラスが既に追加されている場合には、クラス名を変更するなどして文書内でスタイリングの上書きなどが起こらないよう気を付けてください。

簡単なコード解説

先ほどご紹介したコードをHTML、CSS、JavaScriptの3つに分けて簡単に解説していきます。

専門的な知識もいくつか出てきますが、完全には理解できなくても「そんなもんなんだな」というくらいでOKだと思います。

HTML

<form class="diet_form">
    <dl>
        <dt>体重(kg)：</dt>
        <dd><input type="number" class="box" name="weight"></dd>
        <dt>体脂肪率(%)：</dt>
        <dd><input type="number" class="box" name="bfp"></dd>

        <p><input type="button" class="calc-btn" onclick="calc(weight.value, bfp.value);" value="計算"></p>

        <dt>徐脂肪体重(kg)：</dt>
        <dd><input id="lean" class="box" type="text" readonly=""></dd>
        <dt>摂取可能カロリー(kcal)：</dt>
        <dd><input id="cal" class="box" type="text" readonly=""></dd>
        <dt>タンパク質(g)：</>
        <dd><input id="protein" class="box" type="text" readonly=""></dd>
        <dt>脂質(g)：</dt>
        <dd><input id="fat" class="box" type="text" readonly=""></dd>
        <dt>炭水化物(g)：</dt>
        <dd><input id="carbo" class="box" type="text" readonly=""></dd>
    </dl>
</form>

まず初めに、全体を「class="diet_form"」クラスを付けたformタグで囲み、dl、dt、ddタグを使ってそれぞれの項目をマークアップしています。

入力用のテキストボックスは「type="number"」、出力用のテキストボックスは「type="text"」でそれぞれ作成しています。

また、出力用のボックスには「readonly=""」として出力専用(入力不可)とし、さらにidも付与してJavaScriptでの計算結果をそれぞれの出力用ボックスに紐づくように設定しています。

間に挟む計算用のボタンには「type="button"」でボタンとしつつ、onclick属性でJavaScriptで定義しているcalc関数を呼び出しています。

その際に与える仮引数としては、入力用のテキストボックスにname属性で付けた「weight」と「bfp」を用いて、それぞれの値を渡しています。

CSS

<style>
.diet_form {
    background: #eaf4ff;
    padding: 10px 30px;
}

form dl dt {
    width: 200px;
    height: 40px;
    padding: 10px 0;
    line-height: 40px;
    float: left;
}

form dl dd {
    padding: 10px 0;
    margin: 0;
}

.box {
    box-sizing: border-box;
    width: 150px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
}

.calc-btn {
    width: 80px;
    height: 30px;
    border: 1px solid #333;
}

.calc-btn:hover {
    cursor: pointer;
}
</style>

全体の背景色、および余白の設定はformタグに付与した「diet_form」クラスでスタイリングし、その後にform > dl配下のdtとddにさらに細かいスタイリングを行っています。

1点ポイントとして、dtタグに対して「float: left;」と指定することで要素を左に回り込ませ、1行に項目とボックスを並べてすっきりとした見た目にスタイリングしています。これを指定しないと項目名とボックスが縦に並んで縦長になってしまうので注意しましょう。

また、計算ボタン以外のフォーム部品は「class="box"」で統一しているので、全て同じ見た目になります。

計算ボタンのクラスは「class="calc-btn"」で指定しており、高さ・幅・枠線・マウスをホバーしたときのカーソル指定のみの簡単なスタイリングになっています。

JavaScript

<script>
    function calc(weight, bfp) {
        const lean_value = document.getElementById('lean').value = Math.round((weight - (weight * (bfp / 100))) * 100) / 100;
        const cal_value = document.getElementById('cal').value = Math.round(lean_value * 40);
        const protein_value = document.getElementById('protein').value = Math.round(lean_value * 2);
        const fat_value = document.getElementById('fat').value = Math.round(lean_value * 0.9);
        const carbo_value = document.getElementById('carbo').value = Math.round((cal_value - (protein_value * 4) - (fat_value * 9)) / 4);
    }
</script>

calc関数の呼び出し時に渡した「weight(体重)」と「bfp(体脂肪率)」を値として受け取り、各出力値の計算を行っていきます。

HTMLのパートで書きましたが、それぞれの出力ボックスにはidを振っており、そのidをもとに「getElementById()」メソッドで各出力ボックスの要素を取得して、それぞれの出力値に合った計算を行っています。

また、値によっては他の計算で出た値を使用しているものもあるので、コーディングする順番には注意しましょう。

式の中で使用する値が後にきてしまうと参照エラーとなってしまいます。

まとめ

今回はHTMLとJavaScriptで作る簡易的な計算フォームの作り方をご紹介しました。

今回説明した「id属性で紐づけた要素の出力値を、JavaScriptのメソッドで取得して計算して表示する」という仕組みが分かっていれば、今回のカロリー計算フォーム以外にも様々な計算フォームを作れるようになると思いますので、ぜひ今回の記事を参考にしてオリジナルの計算フォームを作成してみてください。