[HTML5] 使いづらいと思っていたINPUTタグのnumberタイプの知らなかった裏技の話（小数点が入力できるようになるって話）

入力フォームの達人、弓削田です。 世の中に、「EFO」を最初に生み出したエンジニアとして、 某上場企業のCTOをやっていた経緯もあり、入力フォームはお手の物と自負していたのですが、 それもHTML4の時代の話で、HTML5の入力タイプについてはいまいち使いこなせていなくて 中でも数値入力できる、numberタイプは、その昔、HTML5が世に出始めた時に、 数値入力はできるけど、小数点を入力するために「.」ドットを入力しても、 フォームから弾かれて、入力ができないということを聞いていたので、 「正直使えない！」と思って、その際はtextタイプを使うと言うふうに考えていました。

知らない人の為に、どんな症状かを説明

webエンジニアの人であれば、誰もが知っている話かと思いますが、 初心者の人などは、もしかしたら知らない人もいるかもしれないので、 簡単に説明をしておきます。 まず通常のinput type=numberを下記のように書くと <form method="post"> <input type="number" name="normal_number"> <button type="submit">送信</button> </form> 入力した時は、問題ないのですが、送信しようとsubmitすると・・・ こんなエラーが出て送信できなくなります。 整数値であれば、問題ないんですが、float値を送信したい場合などに困りますよね。

inputのtype=numberで小数点を入力する方法

ググればすぐに表示されるのですが、 inoutタグに、stepという属性をつけるだけで、小数点の入力が可能になります。 <form method="post"> <input type="number" name="float_version" step="0.1"> <button type="submit">送信</button> </form> stepという属性をつけるだけなんですね。 このstep属性というのは、入力フォームの項目内の数値を切り替える上下矢印の値なので この値を0.1ステップにするという理解なんですけど、 これって、正直「裏技」ですよね？

エンジニアならではの実験

ちなみに、興味本位で、いくつかの実験をして、この機能の詳細をつかんでおきたくなった。 stepを0.2にしたら、0.1という値は、送信できるのか？ <form method="post"> <input type="number" name="step_02" step="0.2"> <button type="submit">送信</button> </form> エラー出た！ 次は、stepに0.0を入れたらどうだろう？ <form method="post"> <input type="number" name="step_00" step="0.0"> <button type="submit">送信</button> </form> エラー出た！ でも、1.0のような、.0の値は正常に通るようだ。 これを踏まえると、 0.1とすると、小数点第一位が通る仕様にできる。 もちろん、step=0.1で、「0.10」は通るが、「0.11」は通らない。 小数点第二位まで許容したい場合は、step=0.01にする必要がある。 なんとも使いにくいという印象を持ちそうだが、以外としっかりとした仕様になっている気がする。 今後は、整数値であっても、step=1や、step=1.0を登録するクセをつけるとしよう。 とにかく、まだまだ知らない仕様がありそうなので、リファレンスを読み込み必要がありそうだ。