HTML

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
電話番号
“‐” や “+” を含む番号キーボード
email
メール
“@”・“.” が押しやすいキーボード
url
URL
“/”・“.” が押しやすいキーボード
search
検索語
検索ボタン付きキーボード

ポイント：ブラウザや端末によって表示は完全一致しませんが、「最適なキーボードを出すヒント」として広くサポートされています。

使い方サンプル

HTML

<!-- 数字のみを入力させたいが、type="text" で自由に扱いたい -->
<input type="text" inputmode="numeric" pattern="\d+">

pattern などと組み合わせると 見た目 と バリデーション を分離できます。

inputmode と似た属性との違い

type 属性
ブラウザに「データ型を保証して！」と頼む。
例：type="email" は自動で形式検証が入る。
inputmode 属性
端末に「このキーボードが便利だよ」と教えるだけ。
検証は自分で組む（pattern, JavaScript など）。

まとめ

inputmode は ユーザー体験を向上させるための“キーボード切り替えスイッチ”。

正しい値を設定すると、スマホ利用者は「入力しやすい！」と感じてくれます。