前回、基本的なフォームを作りましたが、テキスト入力だけじゃ物足りないです。メールアドレスや電話番号、パスワードなど、用途に応じた入力欄を作りたいです！
その通り！前回はtype="text"だけを使ったけど、実際のWebサイトではもっと多彩な入力タイプが使われているね。ユーザーが使いやすくて、間違いにくい入力フォームを作るコツを学んでみよう。
入力タイプの種類と特徴
HTML5では、ユーザーが入力する情報の種類に応じて、最適化された様々な入力タイプが用意されています。適切な入力タイプを選択することで、ユーザーの入力体験が向上し、データの品質も確保できます。
HTML5の入力タイプは、大きく4つのカテゴリーに分類できます：
- テキスト系 文字列の入力に使用。メールアドレスやURL、電話番号など、用途に応じた専用バリデーションが適用されます
- 数値系 数値の入力や範囲選択に特化。スピンボタンやスライダーによる直感的な操作が可能です
- 日付・時間系 カレンダーピッカーや時刻選択ツールがブラウザによって自動提供され、正確な日時入力をサポートします
- 選択系 ラジオボタンやチェックボックス、ファイル選択など、選択肢から選ぶ形式の入力を担当します
これらの入力タイプを適切に使い分けることで、ユーザーは迷うことなく情報を入力でき、開発者はデータの品質を確保できるようになります。
基本的な入力タイプ
実際にWebサイトでよく使われる入力タイプを、カテゴリー別に詳しく見ていきましょう。それぞれの特徴と使いどころを理解することで、ユーザーにとって使いやすいフォームを作ることができます。
テキスト系入力
テキスト系の入力タイプは、文字列を入力する場面で使用されます。用途に応じて専用のバリデーション機能が提供され、モバイルデバイスでは最適なキーボードが自動表示されます。
<!-- 基本的なテキスト入力 -->
<input type="text" name="username" placeholder="山田太郎">
<!-- メールアドレス入力 -->
<input type="email" name="email" placeholder="example@example.com">
<!-- パスワード入力 -->
<input type="password" name="password" placeholder="パスワード">
<!-- 電話番号入力 -->
<input type="tel" name="phone" placeholder="090-1234-5678">
<!-- URL入力 -->
<input type="url" name="website" placeholder="https://example.com">| type属性 | 用途 | 特徴 |
|---|---|---|
| text | 基本的なテキスト入力 | 名前やコメントなど、自由な文字列を受け付けます |
| メールアドレス専用 | @マークの有無など、基本的な形式をブラウザが自動チェックします | |
| password | パスワード専用 | 入力した文字が●で隠されて表示されます |
| tel | 電話番号専用 | モバイルデバイスで数字キーパッドが表示されます |
| url | URL専用 | http://やhttps://から始まる形式をブラウザが検証します |
数値系入力
数値系の入力タイプは、数字の入力や範囲選択に特化しています。スピンボタンやスライダーによる直感的な操作が可能で、最小値・最大値・ステップ値を設定できます。
<!-- 数値入力（年齢 0〜120歳） -->
<input type="number" name="age" min="0" max="120" placeholder="25">
<!-- 範囲スライダー -->
<input type="range" name="volume" min="0" max="100" value="50">
<!-- ステップ指定の数値入力（価格 (円)） -->
<input type="number" name="price" min="0" step="0.01" placeholder="1234.56">| type属性 | 用途 | 特徴 |
|---|---|---|
| number | 数値専用入力 | スピンボタン（上下矢印）が表示され、キーボードで数字以外の入力を制限します |
| range | スライダー形式 | 視覚的に値を選択でき、設定画面や音量調整などに適しています |
その他の属性（typeとは別に指定する属性）
| 属性 | 用途 | 説明 |
|---|---|---|
| min / max | 入力範囲の制限 | 入力可能な最小値・最大値を指定し、範囲外の値はブラウザや検証で弾かれます |
| step | 増減単位の指定 | 増減の刻みを指定（例: 0.01で小数点以下2桁、10で10単位） |
日付・時間系入力
日付・時間系の入力タイプでは、カレンダーピッカーや時刻選択ツールがブラウザによって自動的に提供されます。正確な日時入力をサポートし、フォーマットエラーを防ぎます。
<!-- 日付選択 -->
<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">
<!-- 時刻選択 -->
<input type="time" name="meeting-time" min="09:00" max="18:00">
<!-- 日時選択 -->
<input type="datetime-local" name="appointment">
<!-- 月選択 -->
<input type="month" name="start-month">
<!-- 週選択 -->
<input type="week" name="vacation-week">| type属性 | 用途 | 特徴 |
|---|---|---|
| date | 日付専用 | カレンダーから選択でき、YYYY-MM-DD形式で値が管理されます |
| time | 時刻専用 | 時:分の形式で入力でき、24時間表記での管理が可能です |
| datetime-local | 日時同時選択 | 予約システムやスケジュール管理に最適です |
| month | 月単位の選択 | 年月のみが必要な場合に使用し、YYYY-MM形式で管理されます |
| week | 週単位の選択 | 年と週番号で管理され、プロジェクト管理などに活用できます |
選択系入力
選択系の入力タイプは、予め用意された選択肢から選ぶ形式の入力を担当します。単一選択、複数選択、ファイル選択など、目的に応じて適切なタイプを選択できます。
<!-- ラジオボタン（単一選択） -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男性</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女性</label>
<!-- チェックボックス（複数選択） -->
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">読書</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">スポーツ</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音楽</label>
<!-- ファイル選択 -->
<input type="file" name="image" accept="image/*">| type属性 | 用途 | 特徴 |
|---|---|---|
| radio | 単一選択専用 | 同じname属性のものから1つだけ選択できます |
| checkbox | 複数選択可能 | 独立した項目のオン・オフ切り替えに使用します |
| file | ファイル選択専用 | accept属性でファイル形式を制限できます |
label要素
| 要素 | 用途 | 特徴 |
|---|---|---|
| label要素 | 関連付け | ラジオボタンやチェックボックスと関連付けし、クリック範囲を拡大します |
- accept属性 ファイル形式の制限 file要素でアップロード可能なファイル形式を指定します（例:
image/*,.pdf） - multiple属性 複数ファイル選択 file要素で複数ファイルの同時選択を可能にします
フォームを作るときに、スマホやタブレットでも使いやすくするにはどうしたらいいですか？目の不自由な方にも配慮したいです。
素晴らしい視点だね！モバイルデバイスでは適切なキーボードが表示されるように、そしてスクリーンリーダーなどの支援技術でも正しく読み上げられるように工夫する必要があるんだ。
入力タイプに応じたモバイルキーボードの最適化
スマートフォンやタブレットでは、入力タイプに応じて自動的に最適なキーボードが表示されます。これにより、ユーザーの入力効率が大幅に向上します。
適切なtype属性を指定するだけで、ブラウザが自動的に最適なキーボードを表示してくれるため、特別なJavaScriptやCSSは必要ありません。
type=“tel” - 数字キーパッドの表示
電話番号入力では、数字キーパッドが表示されます。
type属性
<input type="tel">モバイルでの表示
- 入力フィールドをタップすると数字キーパッドが自動表示
- 文字キーボードへの切り替え不要で入力効率が向上
- 電話番号入力に最適化されたレイアウト
type=“email” - メール専用キーボード
メールアドレス入力では、@キーが配置されたキーボードが表示されます。
type属性
<input type="email">モバイルでの表示
- 通常のキーボードに@キーが追加配置
- メールアドレス形式の自動バリデーション
- ドメイン入力時の効率化(.com等の候補表示)
type=“password” - パスワード専用入力
パスワード入力では、数字や記号が入力しやすいキーボードが表示されます。
type属性
<input type="password">モバイルでの表示
- 英数字キーボードが自動表示され、記号入力も効率的
- 入力した文字は●（ドット）で隠されてセキュリティを確保
- パスワード用の特殊文字（!@#$など）にもアクセスしやすい配置
type=“search” - 検索専用キーボード
検索入力では、検索ボタンが表示されます。
type属性
<input type="search">モバイルでの表示
- キーボードに「検索」ボタンが表示
- 入力後すぐに検索アクションを実行可能
- 検索フォームでの操作性が向上
- type=“tel” 数字キーパッドで電話番号入力が快適になります
- type=“email” @キー付きでメールアドレス入力が効率的になります
- type=“password” 記号入力がしやすく、セキュリティも確保されます
- type=“search” 検索ボタンで検索操作が直感的になります
- 自動最適化 HTMLの属性だけで、プラットフォームに応じたキーボードが表示されます
理解度チェッククイズ
さまざまな入力タイプについて学びましたが、理解できたかクイズで確認してみましょう！
入力タイプ活用ミニクイズ
<input type="①" name="email" placeholder="example@example.com"><input type="①" name="age" min="0" max="120"><!-- 生年月日 -->
<input type="①" name="birthday">
<!-- 予約時刻 -->
<input type="②" name="time">まとめ
いろんな入力タイプがあるんですね！特にtype=“email”やtype=“number”は、入力する内容に合わせて自動的にチェックしてくれるから便利！
モバイルで見ると、入力タイプに応じて最適なキーボードが表示されるのも驚きました。ユーザーのことを考えた機能ですね。
その通り！適切な入力タイプを選ぶことで、ユーザーは快適に入力でき、開発者は品質の高いデータを取得できるんだ。次の章では、これらの入力タイプをさらに便利にする属性について学んでいこう。
- テキスト系 用途に応じてtext、email、password、tel、urlを使い分け、自動バリデーションを活用
- 数値系 numberで数値入力、rangeでスライダー選択、min/max属性で範囲制限
- 日付・時間系 date、time、datetime-localで正確な日時入力をサポート
- 選択系 radioで単一選択、checkboxで複数選択、fileでアップロード機能を実装
- モバイル最適化 type属性に応じて最適なキーボードが自動表示され、入力効率が向上
適切な入力タイプの選択は、ユーザビリティとデータ品質の両方を向上させる重要な要素です。次の章では、これらの入力をさらに便利にする属性について詳しく学んでいきましょう。