HTML / CSS
「スマートフォン」や「タブレット」でフォームを入力する際に表示されるキーボードを指定する「inputmode属性」
inputmode とは
inputmode（インプットモード）属性は、入力フォームでユーザーが文字を打つときに、「どんな種類のキーボードを出すか」をブラウザに伝えるための属性です。
特に スマートフォン で効果を発揮します。
・入力内容を制限するものではない
・どんなキーボードを表示してほしいかの “ヒント” を出すだけ
type と inputmode はどう違う？
| type | 入力内容を制限する（HTML側でバリデーション） |
|---|---|
| inputmode | キーボード表示を変えるヒントを与えるだけ（制限しない） |
例：
type="number" は数字以外を入力できないように制限する
inputmode="numeric" は 数字用のキーボードを出す“だけ”（入力制限はなし）
主な値と動作
| 値 | どんな場面で使う？ | 表示されやすいキーボード |
|---|---|---|
| text | 普通の文字 | 標準キーボード
|
| tel | 電話番号入力 | 電話番号用テンキー 「0 から 9」までの数字とアスタリスク ( * )、シャープ ( # ) キーなどが表示される 電話番号を入力するフォームの場合は、<input type="tel"> が推奨される
|
| numeric | 年齢・ID・郵便番号など数字だけ | 数字だけのテンキー 端末によっては負号（ - ）が入力できる
|
| decimal | 小数を含む金額など | 数字 + 小数点入力できるキーボードが表示 端末によっては負号（ - ）が入力できる
|
| メールアドレス入力 | メールアドレスの入力に最適化されたキーボードが表示 「@」や「. 」が出やすいキーボード メールアドレスを入力するフォームの場合は、<input type="email"> が推奨される
|
|
| url | URL入力 | URLの入力に最適化されたキーボードが表示 「/」や「.」が出やすい URLを入力するフォーム場合は、<input type="url"> が推奨される
|
| search | 検索窓 | 検索の入力に最適化されたキーボードが表示 return/submitキーの箇所が「検索」になっている 検索内容を入力するフォームの場合は、<input type="search"> を推奨
|
| none | 表示しない | ソフトウェアキーボードを表示しない
|