HTML5で追加されたinput要素のtype属性

HTML5ではinput要素で指定できるtype属性が追加されました。この記事ではHTML5で追加されたinput要素のtype属性についてまとめます。

HTML5が登場する前からあるinput要素のtype属性については以下の記事を参照してください。

HTML5が登場する前のinput要素のtype属性
HTML5では新たにinput要素で指定できるtype属性が追加されましたが、この記事ではHTML5が登場する前からすでにあるinput要素...

input要素のtype属性

HTML5で追加されたinput要素で指定できるtype属性は以下の13種類になります。

type属性 説明
tel 電話番号入力欄
email メールアドレス入力欄
url URL入力欄
number 数値入力欄
date 日付入力欄
datetime 日時入力欄
datetime-local ローカル日時入力欄
month 月入力欄
week 週入力欄
time 時間入力欄
search 検索用の入力欄
range 範囲の指定欄
color 色の指定欄

tel 電話番号入力欄

電話番号のテキストボックスを作成します。

email メールアドレス入力欄

メールアドレスのテキストボックスを作成します。

url URL入力欄

URLのテキストボックスを作成します。

number 数値入力欄

数値のテキストボックスを作成します。

date 日付入力欄

日付のテキストボックスを作成します。

datetime 日時入力欄

日時のテキストボックスを作成します。

input type=”datetime”は廃止されました。
MDN <input type=”datetime”>

datetime-local ローカル日時入力欄

ローカル日時のテキストボックスを作成します。

month 月入力欄

月のテキストボックスを作成します。

week 週入力欄

週のテキストボックスを作成します。

time 時間入力欄

時間のテキストボックスを作成します。

search 検索用の入力欄

検索用のテキストボックスを作成します。

range 範囲の指定欄

範囲を指定するスライダーを作成します。

color 色の指定欄

色を指定する選択ボックスを作成します。

サンプル

HTMLソース

ブラウザでの表示結果

ブラウザでの表示結果