HTML
この記事では、数字やメールアドレスなど、入力内容に合ったソフトウェアキーボードをスマートフォンに表示するヒントを与えるinputmode属性と、type属性との違いを説明します。
この記事でわかること
inputmodeが示す入力キーボードのヒントtype属性との違い- 入力しやすさと検証を両立する設計
The inputmode attribute is a hint that specifies the type of keyboard to display on smartphones and tablets to make input easier.
inputmode 属性
何をする属性？
input 要素などに付けて、スマホやタブレットで表示されるソフトウェアキーボードの種類を指定します。
例：数字専用キーボード、メールアドレス用キーボードなど。
なぜ必要？
type="text" だけでは入力内容が多目的すぎて、ユーザーが毎回キーボードを切り替える手間が発生。
type="number" などでは 自動バリデーション も一緒に有効になり、自由度が落ちることも。
inputmode なら「見た目のキーボード」だけを切り替え、バリデーションは任せません。
主な値と効果
- none
- キーボード表示しない／IME 無効
- ―
- text
- 文章・自由入力
- 標準キーボード
- decimal
- 0–9 と小数点
- 数字キーボード（ピリオド付き）
- numeric
- 0–9 だけ
- 電卓風キーボード
- tel
- 電話番号
- “‐” や “+” を含む番号キーボード
- メール
- “@”・“.” が押しやすいキーボード
- url
- URL
- “/”・“.” が押しやすいキーボード
- search
- 検索語
- 検索ボタン付きキーボード
ポイント：ブラウザや端末によって表示は完全一致しませんが、「最適なキーボードを出すヒント」として広くサポートされています。
使い方サンプル
HTML
<!-- 数字のみを入力させたいが、type="text" で自由に扱いたい -->
<input type="text" inputmode="numeric" pattern="\d+">pattern などと組み合わせると 見た目 と バリデーション を分離できます。
inputmode と似た属性との違い
type属性- ブラウザに「データ型を保証して！」と頼む。
- 例：
type="email"は自動で形式検証が入る。 - inputmode 属性
- 端末に「このキーボードが便利だよ」と教えるだけ。
- 検証は自分で組む（
pattern, JavaScript など）。
まとめ
inputmode は ユーザー体験を向上させるための“キーボード切り替えスイッチ”。
正しい値を設定すると、スマホ利用者は「入力しやすい！」と感じてくれます。