HTML5 Input タイプ
HTML5 新らしい Input タイプ
HTML5 のフォームには、いくつかの新らしい input タイプがあります。
これらの新たな機能は、良好な入力制御と検証が可能になっています。
この章では、次の新たな入力タイプをカバーしています:
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
注: 主要な全ブラウザは、すべての新しい入力タイプをサポートしています。
既にそれらを使い始めることができます；サポートされていない場合は、
通常のテキストフィールドとして動作します。
入力タイプ: color
color タイプは、色が含まれている必要のある入力フィールドに使用します。
入力タイプ: date
date タイプはユーザへ日付の選択ができるようにします。
入力タイプ: datetime
datetime タイプはユーザへ日付と時刻（タイムゾーン付き）の選択ができるようにします。
入力タイプ: datetime-local
datetime-local タイプはユーザへ日付と時刻（タイムゾーンなし）の選択ができるようにします。
入力タイプ: email
email タイプは、メールアドレスが含まれる入力フィールドに使用します。
チップ: iPhone の Safari は、email の種類を認識し、それに合わせて、
画面上のキーボードを変更 (@ と .com 選択肢を追加) します。
入力タイプ: month
month タイプは、ユーザへ月と年の選択ができるようにします。
入力タイプ: number
number タイプは、数値が含まれる入力フィールドに使用します。
どのような数が受け入れ可能か制約を設定することもできます:
次の属性を使用し、制約を指定します:
すべての制約属性を持った例を試してください:
Try it yourself
入力タイプ: range
range タイプは、数値の範囲内の値を含める必要がある入力欄に使用します。
どのような数を受け入れるかに関する制約も設定できます
次の属性を使用して制約を指定します:
入力タイプ: search
search タイプは、検索フィールドに使用します（検索フィールドは、通常のテキストフィールドのように機能します）。
入力タイプ: tel
入力タイプ: time
time タイプは、ユーザへ時間の入力ができるようにします。
入力タイプ: url
url タイプは、URL アドレスを含む必要があるフィールドに使用します。
フォームを送信する時に、url フィールドの値は自動的に検証されます。
チップ: iPhone の Safari は、url の種類を認識し、それに合わせて、
画面上のキーボードを変更 (.com 選択肢を追加します) します。
入力タイプ: week
week タイプは、ユーザへ曜日と年の選択ができるようにします。
HTML5 <input> Tag
|
