HTML: HTML入力タイプリファレンス
最終更新：2026-09-08
<input> 要素の type 属性は、入力フィールドの外観と動作を決定します。HTMLは20以上の入力タイプを提供し、テキスト、数値、日付、選択、ボタンなどのさまざまなシーンをカバーします。
1. テキスト入力タイプ
テキスト入力タイプはさまざまな形式のテキスト情報を収集するために使います。
type="text"― デフォルトタイプ、1行テキスト入力type="password"― パスワード入力、文字がマスク表示されるtype="email"― メールアドレス、自動で形式バリデーション、モバイルキーボードに@が表示されるtype="tel"― 電話番号、モバイルキーボードに数字キーパッドが表示されるtype="url"― URL入力、自動でURL形式をバリデーションtype="search"― 検索ボックス、ブラウザによってはクリアボタンが表示される
▶ サンプル
▶ 試してみよう2. 数値入力タイプ
数値入力タイプはユーザーが数値や色の値を選択または入力できるようにします。
type="number"― 数値入力、min、max、stepを制限可能type="range"― スライダー選択、数値を返すtype="color"― カラーピッカー、16進数の色値を返す
▶ サンプル
▶ 試してみよう3. 日付と時刻の入力タイプ
日付と時刻の入力タイプは、カレンダーやタイムピッカーを使ってユーザーが日付をすばやく選択できるようにします。
type="date"― 日付ピッカー（年-月-日）type="time"― 時刻ピッカー（時:分）type="datetime-local"― ローカルの日付＋時刻type="month"― 月ピッカー（年-月）type="week"― 週ピッカー（年-週）
▶ サンプル
▶ 試してみよう4. 選択入力タイプ
選択入力タイプはユーザーが複数のオプションから選択できるようにします。
type="checkbox"― チェックボックス、複数選択可能type="radio"― ラジオボタン、同じnameグループ内では1つだけ選択可能type="file"― ファイルアップロード、acceptでファイルタイプを制限可能
▶ サンプル
▶ 試してみよう5. ボタン入力タイプ
ボタン入力タイプはフォームのアクションをトリガーするために使います。
type="submit"― 送信ボタン、フォームデータをサーバーに送信type="reset"― リセットボタン、フォームコントロールを初期値に戻すtype="button"― 汎用ボタン、機能させるにはJavaScriptが必要type="image"― 画像ボタン、submitと同様の機能だが、テキストの代わりに画像を使用
▶ サンプル
▶ 試してみよう6. 非表示と特殊な入力
type="hidden" フィールドはページに表示されませんが、フォームと一緒に送信されます。ユーザーIDやCSRFトークンなどのメタデータを渡すためによく使われます。
▶ サンプル
▶ 試してみよう💡 注意：hidden入力は、ユーザーIDやトークンなど、ユーザーが見る必要のないデータを渡すためによく使われます。ただし、このデータはユーザーにも見えます（ソースコードを表示すればわかります）。そのため、機密情報をhiddenフィールドに保存してはいけません ― 本当のセキュリティ検証はサーバー側で行うべきです。
7. 入力タイプ完全リファレンス表
| タイプ | 説明 | よく使われる属性 |
|---|---|---|
text |
1行テキスト | placeholder, maxlength, pattern |
password |
パスワード（マスク表示） | placeholder, maxlength |
email |
メールアドレス | placeholder, multiple |
tel |
電話番号 | placeholder, pattern |
url |
URL / Webアドレス | placeholder |
search |
検索ボックス | placeholder |
number |
数値入力 | min, max, step |
range |
範囲スライダー | min, max, step |
color |
カラーピッカー | ― |
date |
日付ピッカー | min, max, step |
time |
時刻ピッカー | min, max, step |
datetime-local |
ローカルの日付＋時刻 | min, max |
month |
月ピッカー | min, max |
week |
週ピッカー | min, max |
checkbox |
チェックボックス（複数選択） | checked |
radio |
ラジオボタン | checked |
file |
ファイルアップロード | accept, multiple |
submit |
送信ボタン | value, formaction |
reset |
リセットボタン | value |
button |
汎用ボタン | value, onclick |
image |
画像ボタン | src, alt |
hidden |
非表示フィールド | value |
❓ よくある質問
Q なぜ
textの代わりにemail、tel、urlなどのタイプを使うのですか？A セマンティックな入力タイプには3つの利点があります：1）モバイルデバイスがコンテキストに適したキーボードを表示します（
emailは@記号を、telはテンキーを表示）；2）ブラウザがフォーマットを自動検証します（例：emailには@が必要）；3）スクリーンリーダーがユーザーに「これはメールフィールドです」と伝え、アクセシビリティを向上させます。textでも動作しますが、正しいタイプを使用することでユーザーエクスペリエンスが向上します。Q
dateタイプのブラウザ間の不一致はどうすればいいですか？A これはHTML5の日付ピッカーの既知の問題で、Chrome、Firefox、Safariはそれぞれ異なるUIを持っています。解決策：1）違いを受け入れ、ネイティブブラウザ体験に依存する；2）JavaScript日付ライブラリ（flatpickrなど）を使用して統一されたUIを提供する；3）
textタイプとJavaScriptバリデーションを使用して完全にカスタマイズする。推奨事項：デザインの一貫性が重要な場合はオプション2または3を使用し、ネイティブ体験を求める場合はオプション1を使用します。Q
numberとrangeの違いは何ですか？いつ使うのですか？A
numberは精密な数値入力用で、ユーザーは正確な値を入力でき、数量、年齢、価格などに適しています。rangeはスライダーで、ユーザーは範囲内でスライドするだけで、音量、明るさ、評価など精密さが重要な場合に適しています。どちらもmin、max、stepで範囲を制限できます。一般的なパターン：粗い調整にはrangeを使い、微調整にはnumberを使い、二者をリンクさせます。Q
hiddenタイプは安全ですか？ユーザーは見ることができますか？A
hidden入力はページには表示されませんが、ユーザーは「ソースを表示」やDevToolsを使用して値を確認できます。パスワード、APIキー、機密情報をhiddenに保存してはいけません。正しい用途は、ユーザーID、CSRFトークン、セッション識別子などのメタデータを渡すことです。セキュリティの原則：クライアント側のデータを信頼してはならず、本当のセキュリティ検証はサーバー側で行う必要があります。📖 まとめ
<input type="...">には20以上のタイプがあり、用途別に分類：テキスト、数値、日付、選択、ボタン、非表示- テキストタイプ：text、password、email、tel、url、search
- 数値タイプ：number（精密）、range（スライダー）、color（カラーピッカー）
- 日付タイプ：date、time、datetime-local、month、week
- 選択タイプ：checkbox（複数選択）、radio（単一選択）、file（アップロード）
- ボタンタイプ：submit、reset、button（汎用）、image
- 特殊：hidden（非表示フィールド、メタデータ受け渡し用）
📝 練習問題
- 登録フォーム： 5つ以上の入力タイプを含む「サインアップ」フォームを作成してください：
text（ユーザー名）、email、password、date（誕生日）、radio（性別）、checkbox（趣味）、file（アバターアップロード）、submit、reset。 - Rangeの同期： 値がリアルタイムで同期するrangeスライダーと数値入力を作成してください。範囲：0〜100、ステップ：5。
