HTML 入力タイプ

Volardev 編集部 April 12, 2026

HTML の <input> 要素は、type 属性を変えるだけでその姿を自在に変える「カメレオン」のような存在です。適切な type を選択することは、単に見た目を変えるだけでなく、データのバリデーション（検証）やモバイル端末でのキーボード最適化に直結します。

1. 伝統的な入力タイプ (Traditional Types)

HTML5 以前から使われている、基本的かつ必須のタイプです。

type="text": デフォルト値。1行のテキスト入力。
type="password": 入力文字を伏せ字（●など）にします。
type="submit": フォームデータを送信するボタン。
type="radio": 複数から1つを選択（ラジオボタン）。
type="checkbox": 複数から0個以上を選択。
type="button": JavaScript で制御するための汎用ボタン。
type="hidden": ユーザーには見えないが、サーバーに送る必要があるデータ（IDやトークンなど）を保持します。

2. HTML5 で追加された新しいタイプ

モダンなブラウザでは、これらのタイプを指定するだけでブラウザ固有の UI（カレンダーやカラーピッカー）が表示されます。

2.1 日付と時間

type="date": 日付（年・月・日）の選択。
type="time": 時間（時・分）の選択。
type="datetime-local": 日付と時間の両方。
type="month" / type="week": 特定の月や週を選択。

2.2 特殊な入力

type="color": カラーピッカーを表示します。
type="range": スライダーによる数値入力。min / max 属性で範囲を指定します。
type="number": 数値専用。スピンボタン（▲▼）が表示されます。
type="search": 検索ボックス用（入力内容を消去する「×」ボタンが付くことがあります）。

3. モバイル最適化に必須のタイプ

これらのタイプは、スマートフォンのソフトウェアキーボードを自動的に切り替える効果があります。

type="email": メールアドレス形式をチェックし、スマホでは @ キーが表示されます。
type="tel": 電話番号入力。スマホでは数字キーパッドが表示されます。
type="url": URL形式をチェックし、.com や / キーが表示されます。

4. 属性による制約の追加

各タイプと組み合わせて、入力できる値をさらに厳しく制限できます。

<input type="number" name="age" min="18" max="99" step="10">

5. まとめ：入力タイプのクイックリファレンス

type 属性	用途	補足
`text`	一般的な文字	特になければこれ。
`password`	パスワード	セキュリティの基本。
`email`	メールアドレス	モバイルで `@` を表示。
`number`	数値	`min`, `max`, `step` が使える。
`date`	日付	ブラウザ標準のカレンダーを使用。
`range`	範囲	スライダー形式。
`color`	色	カラーコード（#ffffffなど）を取得。

[!TIP]
もしブラウザが指定された type をサポートしていない場合、自動的に type="text" として扱われます。これを「フォールバック（後退）」と呼び、古いブラウザでも入力自体は可能になるという、HTML の非常に優れた設計思想です。