HTML5 の新しい Input タイプ
HTML5 には複数の新しいフォーム入力タイプがあります。これらの新機能は、より良い入力制御と検証を提供します。
この章では、これらの新しい入力タイプを詳しく紹介します：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注意：すべての主要ブラウザが新しい input タイプをサポートしているわけではありませんが、すべての主要ブラウザでそれらを使用することができます。サポートされていなくても、通常のテキストフィールドとして表示されます。
Input タイプ: color
color タイプは input フィールドで主に色を選択するために使用されます。次のようになります：
Input タイプ: date
date タイプを使用すると、日付ピッカーから日付を選択できます。
Input タイプ: datetime
datetime タイプを使用すると、日付（UTC 時間）を選択できます。
Input タイプ: datetime-local
datetime-local タイプを使用すると、日付と時刻を選択できます (タイムゾーンなし)。
Input タイプ: email
email タイプは、e-mail アドレスを含むべき入力フィールドに使用されます。
ヒント：iPhone の Safari ブラウザは email 入力タイプをサポートしており、タッチスクリーンキーボードを変更して（@ と .com オプションを追加）対応します。
Input タイプ: month
month タイプを使用すると、月を選択できます。
Input タイプ: number
number タイプは、数値を含むべき入力フィールドに使用されます。
受け入れる数値の制限を設定することもできます：
例
数値入力フィールドを定義します（制限付き）：
試してみる »
次の属性を使用して、数値タイプの制限を指定します：
| 属性 | 説明 |
|---|---|
| disabled | 入力フィールドを無効にすることを指定します |
| max | 許可される最大値を指定します |
| maxlength | 入力フィールドの最大文字数を指定します |
| min | 許可される最小値を指定します |
| pattern | 入力フィールドを検証するためのパターンを指定します |
| readonly | 入力フィールドの値が変更できないことを指定します |
| required | 入力フィールドの値が必須であることを指定します |
| size | 入力フィールドの表示文字数を指定します |
| step | 入力フィールドの有効な数値間隔を指定します |
| value | 入力フィールドのデフォルト値を指定します |
すべての制限属性を含む例を試してみる試してみる
Input タイプ: range
range タイプは、一定の範囲内の数値を含むべき入力フィールドに使用されます。
range タイプはスライダーとして表示されます。
例
非常に正確な数値を必要としない数値（スライダーコントロールなど）を定義します：
試してみる »
数値タイプの制限を指定するには、次の属性を使用してください：
- max - 許可される最大値を指定
- min - 許可される最小値を指定
- step - 有効な数値間隔を指定
- value - デフォルト値を指定
Input タイプ: search
search タイプは、サイト検索や Google 検索などの検索フィールドに使用されます。
例
検索フィールドを定義します（サイト検索や Google 検索など）：
試してみる »
Input タイプ: tel
Input タイプ: time
time タイプを使用すると、時間を選択できます。
Input タイプ: url
url タイプは、URL アドレスを含むべき入力フィールドに使用されます。
フォームを送信するときに、url フィールドの値が自動的に検証されます。
ヒント：iPhone の Safari ブラウザは url 入力タイプをサポートしており、タッチスクリーンキーボードを変更して（.com オプションを追加）対応します。
Input タイプ: week
week タイプを使用すると、週と年を選択できます。
HTML5 <input> タグ
| タグ | 説明 |
|---|---|
| <input> | input 入力要素を説明する |