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

2021年5月13日

テクノロジー

eyecatch 入力フォームの達人、弓削田です。 世の中に、「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を登録するクセをつけるとしよう。 とにかく、まだまだ知らない仕様がありそうなので、リファレンスを読み込み必要がありそうだ。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。