はじめに
この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。
過去の連載も読む
新たに導入されたフォームコントロール
これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足していると言わざるを得ませんでした。
HTML5では、input要素のtype属性に指定できる値が大幅に増やされました。これまでJavaScriptライブラリなどの助けを借りて実現してきたコントロールを、マークアップだけで実現できるようになります。
既にHTML5で新たに導入されたコントロールは、Firefox、Opera、Safari、Chromeに部分的に実装されています。ここでは、これらのコントロールの詳細を見ていきましょう。ここで紹介するコントロールは、2010年12月15日で最新のFirefox 4.0b7、Opera 11.00 beta Build 1149、Safari 5.03、Chrome 9.0.597.19 devに実装されているものです。また、SafariはMac版、それ以外はWindows版を使っています。
検索（type="search"）
searchタイプのinput要素は、検索入力フィールドを表します。HTML5仕様では、プラットフォームの慣例に従った検索入力フィールドが表示されることになっています。Mac版のSafariであれば、次のように表示されます。
<input type="search">
電話番号（type="tel"）
telタイプのinput要素は、電話番号入力フィールドを表します。見た目は通常のテキスト入力フィールドと同じです。また、電話番号しか入力できないというわけではありません。しかし、iPhoneでは、入力時に電話番号入力用のパネルが表示されるので、利用者の利便性が向上します。
<input type="tel">
URL（type="url"）
urlタイプのinput要素は、URL入力フィールドを表します。見た目は通常のテキスト入力フィールドと違いはありません。
<input type="url">
ただし、URLとして不適切な文字を入力して、フォームをサブミットしようとすると、HTML5 Formsをサポートしたブラウザであればエラーが表示され、サブミットできません。
メールアドレス（type="email"）
emailタイプのinput要素は、メールアドレス入力フィールドを表します。見た目は通常のテキスト入力フィールドと違いはありません。
<input type="email">
ただし、メールアドレスとして不適切な値を入力して、フォームをサブミットしようとすると、HTML5 Formsをサポートしたブラウザであればエラーが表示され、サブミットできません。
日時
HTML5には、日付や時刻を入力するためのコントロールが新たに追加されました。既に、Opera、Safari、Chromeがサポートしています。
<input type="date" value="2010-01-20"/>
Operaではカレンダーが表示されるのに対し、ChromeやSafariではスピンボタンが表示されます。見た目はブラウザによって異なりますが、dateタイプのinput要素には日付を表す文字列をユーザ－インタフェースを通してセットできます。
HTML5では、dateタイプの他にもさまざまなタイプが既定されました。いずれのタイプも、Opera、Safari、Chromeはサポートしています。
| type属性の値 | 説明 | 入力値の例 |
datetime |
日時入力フィールド（UTC） | 2010-01-20T00:00Z |
date |
日付入力フィールド | 2010-01-20 |
month |
年月入力フィールド | 2011-01 |
week |
週入力フィールド | 2010-W01 |
time |
時刻入力フィールド | 09:30 |
datetime-local |
日時入力フィールド（タイムゾーンなし） | 2010-01-20T00:00 |
