HTML入門 | HTML5の開始 | HTML5 input要素のtype
HTML5で新しく追加されたinput要素のtypeは次のとおりである。
- 数値入力（
number） - 入力範囲指定（
range） - 色入力（
color） - 日付入力（
date） - 時刻入力（
time） - 日付と時刻の入力（
datetime-local） - 年と月の入力（
month） - 年と週の入力（
week） - メール入力（
email） - URL入力（
url） - 電話番号入力（
tel） - 検索語入力（
search）
数値入力（number）
<input>タグのtype属性値を"number"に設定すると、input要素はユーザーが数値を入力できるようにする。
numberタイプが通常のtextタイプと異なる点は、入力欄の右側に数値を増減できる上下ボタンが表示されることである。
ブラウザーの対応状況によっては、min属性とmax属性を使って選択できる数値に制限を設定できる。
<input type="number" name="num" min="1" max="9">
numberタイプはInternet Explorer 9以前ではサポートされない。
入力範囲指定（range）
<input>タグのtype属性値を"range"に設定すると、input要素は一定範囲内の値だけを入力できるようにする。
ブラウザーの対応状況によっては、値を選択するための水平スライダーが表示される。
0 <input type="range" name="favnum" min="1" max="9"> 9
rangeタイプはInternet Explorer 9以前ではサポートされない。
色入力（color）
<input>タグのtype属性値を"color"に設定すると、input要素はユーザーが色を入力できるようにする。
選択された色は、#を除いた6桁の16進数カラー値として送信される。
ブラウザーの対応状況によっては、色を選択するためのツールが表示される。
<input type="color" name="color" value="#FF0000">
colorタイプはSafari 9.1以前、Internet Explorer 11以前ではサポートされない。
日付入力（date）
<input>タグのtype属性値を"date"に設定すると、input要素はユーザーが日付を入力できるようにする。
ブラウザーの対応状況によっては、日付を選択するためのカレンダーが表示される。
<input type="date" name="day1">
また、min属性とmax属性を使って日付選択に制限を設定することもできる。
<input type="date" name="day2" min="1977-01-01" max="2020-12-31">
dateタイプはFirefox、Internet Explorer 11以前ではサポートされない。
時刻入力（time）
<input>タグのtype属性値を"time"に設定すると、input要素はユーザーが時刻を入力できるようにする。
ブラウザーの対応状況によっては、時刻を選択するためのツールが表示される。
<input type="time" name="time">
timeタイプはFirefox、Internet Explorer 12以前ではサポートされない。
日付と時刻の入力（datetime-local）
<input>タグのtype属性値を"datetime-local"に設定すると、input要素はユーザーが日付と時刻を入力できるようにする。
ブラウザーの対応状況によっては、日付を選択するカレンダーと時刻を選択するツールが表示される。
<input type="datetime-local" name="time">
datetime-localタイプはFirefox、Internet Explorer 12以前ではサポートされない。
年と月の入力（month）
<input>タグのtype属性値を"month"に設定すると、input要素はユーザーが年と月を入力できるようにする。
ブラウザーの対応状況によっては、年と月を選択するためのカレンダーが表示される。
<input type="month" name="month">
monthタイプはFirefox、Internet Explorer 11以前ではサポートされない。
年と週の入力（week）
<input>タグのtype属性値を"week"に設定すると、input要素はユーザーが年と第何週かを入力できるようにする。
ブラウザーの対応状況によっては、年と週を選択するためのカレンダーが表示される。
<input type="week" name="week">
weekタイプはFirefox、Internet Explorer 11以前ではサポートされない。
メール入力（email）
<input>タグのtype属性値を"email"に設定すると、input要素はユーザーがメールアドレスを入力できるようにする。
ブラウザーの対応状況によっては、送信時に入力されたメールアドレスが有効な形式かどうかを自動で検査する。
<input type="email" name="email">
emailタイプはSafari、Internet Explorer 9以前ではサポートされない。
URL入力（url）
<input>タグのtype属性値を"url"に設定すると、input要素はユーザーがURLを入力できるようにする。
ブラウザーの対応状況によっては、送信時に入力されたURLが有効なURLかどうかを自動で検査する。
<input type="url" name="url">
urlタイプはSafari、Internet Explorer 9以前ではサポートされない。
電話番号入力（tel）
<input>タグのtype属性値を"tel"に設定すると、input要素はユーザーが電話番号を入力できるようにする。
<input type="tel" name="tel">
telタイプはSafari 8でのみサポートされる。
検索語入力（search）
<input>タグのtype属性値を"search"に設定すると、input要素はユーザーが検索語を入力できるようにする。
この検索フィールドは通常のテキストフィールドと同じように動作する。
searchタイプが通常のtextタイプと異なる点は、検索語を入力すると入力欄の右側に入力された検索語をすぐ削除できるX表示が出ることである。
<input type="search" name="keyword">