HTML input type="number" で小数を使いたい！

最近地図周りの開発をしていることが多く、緯度経度を入力するフォームを作ってた際に <input type="numbrt" /> が整数値しか入らなくて、小数入れられないの？ってなったのでメモ

<input type="number" />

特に何もしていない <input type="number" /> に小数を入力する。
input type="number" に小数を入れるとエラーになる

入力自体は可能だが、フォーム送信時にブラウザのバリデーションがかかり「有効な値を入力してください。」というエラーになりフォームが送信できない

Input type="number" で小数 (浮動小数点数) を許可するには step 属性を使う必要がある

number 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。
cf. <input type="number"> - HTML: ハイパーテキストマークアップ言語 | MDN

少数点第二位まで入力可能にするなら step="0.01" 属性を与える必要がある

<input type="number" step="0.01" />

step="0.01" なら整数〜 0.01 までの数値ならOK。0.09 のように小数点第三位の数値は NG になる

<input type="number" /> がデフォルトだと整数値しか入らないの知らなんだ…
おわり ₍ᐢ⑅•ᴗ•⑅ᐢ₎

[参考]

step 属性使わないと怪獣8.5号とか入力できない