サイト制作

inputmodeは入力制限ではない、スマホの数字キーボードを出すためのヒント

慈愛妃きづな

2026-11-06

この記事には広告・アフィリエイトリンクが含まれます。

HTMLのinputmodeは、ブラウザーへ適した入力方法を伝える属性です。numericは数字入力のヒントになりますが、数字以外を拒否する検証機能はありません。入力欄の意味と検証は別に設計します。

数字キーボードを促しても、入力値は保証しない

inputmodeは、スマートフォンなどでどの仮想キーボードを出すと入力しやすいか、ブラウザーへ伝えるヒントです。numericなら数字入力向け、decimalなら小数の入力向けといった指定ができます。

ただし、inputmodeだけでは入力内容を制限できません。コピーして貼り付けたり、物理キーボードから入力したりする場合もあるため、数字のキーが見えたことを、正しい値しか届かない証拠にしないでください。

数字で見えるものが、すべて計算対象の数とは限りません。例えば先頭の0も意味を持つ番号なら、文字列として扱う設計が必要です。その入力を助けるためにnumericを使う、という役割分担ができます。

小数を入力する欄ではdecimalを検討しますが、小数点の記号は利用者の地域設定に左右され、負号キーの有無も端末によって異なります。どの文字を受け付け、どう保存するかは、画面表示とは別に決める必要があります。

電話番号なら電話番号に適した入力欄の種類、メールならメール用の種類をまず選びます。inputmodeでキーボードだけを似せても、入力欄の意味まで同じにはなりません。

表示されるキーボードを実機で確認し、貼り付けや空欄、先頭の0なども試しましょう。誤りがあるときは、どの形式なら入力できるかを伝えます。入力しやすさと、受け取るデータの確認を両方用意するのがポイントです。