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