こんにちは、
職人見習いの木村です。

前回、HTML5入門(その1)では、従来のHTMLとHTML5の違いを紹介しました。

今回は、HTML5で新たに加わったinputタグのtype属性を紹介していきます。

HTML5で新たに加わったtype属性の値は以下の通りです。

search 検索テキスト入力欄
tel 電話番号入力欄
url URL入力欄
email メールアドレス入力欄
datetime UTC(協定世界時)による日時の入力欄
date 日付の入力欄
month 月の入力欄
week 週の入力欄
time 時間の入力欄
datetime-local ローカル日時の入力欄
number 数値の入力欄
range レンジの入力欄
color 色の入力欄

この中から、いくつかをブラウザで確認してみました。(ブラウザはOpera11を使用)

■日時の入力欄

■月の入力欄

■週の入力欄

■時間の入力欄

■数値の入力欄

■レンジの入力欄

■色の入力欄

入力される内容がはっきりわかりやすくなり、カレンダーやレンジ、色など今まではJavaScriptを駆使しなければ実現できなかった表現が容易にできるようになりました。

※この記事は、なかの人(moresmileman)が書いています。