こんにちは、
職人見習いの木村です。
前回、HTML5入門(その1)では、従来のHTMLとHTML5の違いを紹介しました。
今回は、HTML5で新たに加わったinputタグのtype属性を紹介していきます。
HTML5で新たに加わったtype属性の値は以下の通りです。
search | 検索テキスト入力欄 |
tel | 電話番号入力欄 |
url | URL入力欄 |
メールアドレス入力欄 | |
datetime | UTC(協定世界時)による日時の入力欄 |
date | 日付の入力欄 |
month | 月の入力欄 |
week | 週の入力欄 |
time | 時間の入力欄 |
datetime-local | ローカル日時の入力欄 |
number | 数値の入力欄 |
range | レンジの入力欄 |
color | 色の入力欄 |
この中から、いくつかをブラウザで確認してみました。(ブラウザはOpera11を使用)
■日時の入力欄
■月の入力欄
■週の入力欄
■時間の入力欄
■数値の入力欄
■レンジの入力欄
■色の入力欄
入力される内容がはっきりわかりやすくなり、カレンダーやレンジ、色など今まではJavaScriptを駆使しなければ実現できなかった表現が容易にできるようになりました。
※この記事は、なかの人(moresmileman)が書いています。