![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBdDVskyOdVpBpuHD2ekqocUo30HQDqbADTObJjHomz2LLAqJjva1FTewcm4SBWZ4c72Y_B-R_i5r0iHHxoiN_XL7rpwnowFAaeL0vTmTuY654bu3wxmtq30T-Nb_xJVb9m0M5tawNC2V1f0kgy-CErMH6aijzCVuOco9OLUBW_Od5nRkLYdLdgwb/s1600-rw/1620256314_0.jpg)
入力フォームの達人、弓削田です。
世の中に、「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すると・・・
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ppVbBpGHoChjgLjXM8Q5rH-xBWy3ZEI2OQLGB8Yiw6Io20DTHnZlLywDHIqKz9ra4PMIdAWbNoDaDgacUBo_V95R6QetCkSClAIfgb5GfOyQ832Fa05ebkCTs2F7bULvGqCdFAIGgwqh-IrCa-lK_eioVVW7DFY2p5NiW0xHK6YTRaYRKjGs5AIdzQc/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2825%29.jpeg)
こんなエラーが出て送信できなくなります。
整数値であれば、問題ないんですが、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>
エラー出た!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcze1_8Y1MyYfqufQ5F6fiWC86187Loaenx-B2wLvICCTISXb64rm427ZsZ14rCnhcD3ln7WP_ed7MIn4PV8ecX9DH_pLQw4kgymHyCiKAvaDyVSJTpA3lySv76QKI1BQ5tkLZ9-6anaUBZVEpVBoyHf8v-fIEyJBrLB_4U1ibG7vZZ9xK7R80lI5X64/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2826%29.jpeg)
次は、stepに0.0を入れたらどうだろう?
<form method="post">
<input type="number" name="step_00" step="0.0">
<button type="submit">送信</button>
</form>
エラー出た!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDkd83LwW4eKi01TxlpbXst4lK6XSzth3dzRE3va-HW_9gHQk7oiZcn4gcYI4C57KX2iWDcnvyTkU8YO01_Kctpxcpd4zVKF8Zh9j7c76Z_AezSCr0ws6PcQZnWkDj1Xp6OyAv4FtJ0sQDY8fc2yTcHY-A3QKx9ACXyYsF7RpAToieOiMZGEyiUwvPBg/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2827%29.jpeg)
でも、1.0のような、.0の値は正常に通るようだ。
これを踏まえると、
0.1とすると、小数点第一位が通る仕様にできる。
もちろん、step=0.1で、「0.10」は通るが、「0.11」は通らない。
小数点第二位まで許容したい場合は、step=0.01にする必要がある。
なんとも使いにくいという印象を持ちそうだが、以外としっかりとした仕様になっている気がする。
今後は、整数値であっても、step=1や、step=1.0を登録するクセをつけるとしよう。
とにかく、まだまだ知らない仕様がありそうなので、リファレンスを読み込み必要がありそうだ。
0 件のコメント:
コメントを投稿