HTML5で進化したフォーム機能
ここが違う！サンプルで見るHTML5（5）

　連載第5回目では、HTML5で新たに導入されたフォームコントロールを取り上げます。今回は、指定できる値が大幅に増えたinput要素のtype属性や、マークアップでのバリデーション方法、さらに、プレースホルダーやオートフォーカスと言った新機能について説明します。

はじめに

　この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

過去の連載も読む

• 第1回：HTML5が注目を浴びる理由とは？
• 第2回：HTML4から変化したHTML5のマークアップ
• 第3回：HTML5で再定義された要素と属性
• 第4回：HTML5で実現できるマルチメディア系機能

新たに導入されたフォームコントロール

　これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足していると言わざるを得ませんでした。

　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">

Safariの検索入力フィールド

電話番号（type="tel"）

　telタイプのinput要素は、電話番号入力フィールドを表します。見た目は通常のテキスト入力フィールドと同じです。また、電話番号しか入力できないというわけではありません。しかし、iPhoneでは、入力時に電話番号入力用のパネルが表示されるので、利用者の利便性が向上します。

マークアップ例

<input type="tel">

iPhoneの電話番号入力フィールド

URL（type="url"）

　urlタイプのinput要素は、URL入力フィールドを表します。見た目は通常のテキスト入力フィールドと違いはありません。

マークアップ例

<input type="url">

OperaのURL入力フィールド

　ただし、URLとして不適切な文字を入力して、フォームをサブミットしようとすると、HTML5 Formsをサポートしたブラウザであればエラーが表示され、サブミットできません。

サブミット時の入力エラー（Opera）

サブミット時のエラー（Firefox）

メールアドレス（type="email"）

　emailタイプのinput要素は、メールアドレス入力フィールドを表します。見た目は通常のテキスト入力フィールドと違いはありません。

マークアップ例

<input type="email">

Operaのメールアドレス入力フィールド

　ただし、メールアドレスとして不適切な値を入力して、フォームをサブミットしようとすると、HTML5 Formsをサポートしたブラウザであればエラーが表示され、サブミットできません。

サブミット時の入力エラー（Opera）

サブミット時のエラー（Firefox）

日時

　HTML5には、日付や時刻を入力するためのコントロールが新たに追加されました。既に、Opera、Safari、Chromeがサポートしています。

日付入力フィールドのマークアップ例

<input type="date" value="2010-01-20"/>

日付入力フィールドのレンダリング例（Opera）

日付入力フィールドのレンダリング例（Chrome）

日付入力フィールドのレンダリング例（Safari）

　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