最近システムを作成中にフォーム（form）で数値入力をさせたい項目があり、input type=”number”を使用することがありました。
そして、その値が小数点まで許可する必要がありましたの、input type=”number” で小数点を入力する方法をご紹介したいと思います。
小数点の入力を可能にする方法
step属性を指定することで、入力欄で刻むステップ値を指定することができます。
「0.1」刻みで入力させたい場合は以下のようにstepに「0.1」と指定します。
<input type="number" step="0.1">・動作サンプル [0.1]
「0.5」刻みで入力させたい場合は以下のようにstepに「0.5」と指定します。
<input type="number" step="0.5">・動作サンプル[0.5]
step属性の初期値は「1」となっていますので、小数点を入力したい場合はstepを指定してください。
参考までに「10」刻みで入力させたい場合は以下のようにstepに「10」と指定します。
<input type="number" step="10">・動作サンプル[10]
まとめ
input type=”number”を使用すると数値以外の英語や日本語が入力されていたり、step属性に合わない数値が入力されている場合は、メッセージが表示され送信ボタン（submit）を実行することができません。
その為、JavaScriptなどで入力チェックの手間が省けますので、数字入力の場合はとても便利です。
