Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

HTML5で進化したフォーム機能
ここが違う!サンプルで見るHTML5(5)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/24 14:00

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

目次

はじめに

 この連載では、今日のウェブ業界の流行語となっている「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">
Safariの検索入力フィールド
Safariの検索入力フィールド

電話番号(type="tel")

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

マークアップ例
<input type="tel">
iPhoneの電話番号入力フィールド
iPhoneの電話番号入力フィールド

URL(type="url")

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

マークアップ例
<input type="url">
OperaのURL入力フィールド
OperaのURL入力フィールド

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

サブミット時の入力エラー(Opera)
サブミット時の入力エラー(Opera)
サブミット時のエラー(Firefox)
サブミット時のエラー(Firefox)

メールアドレス(type="email")

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

マークアップ例
<input type="email">
Operaのメールアドレス入力フィールド
Operaのメールアドレス入力フィールド

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

サブミット時の入力エラー(Opera)
サブミット時の入力エラー(Opera)
サブミット時のエラー(Firefox)
サブミット時のエラー(Firefox)

日時

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

日付入力フィールドのマークアップ例
<input type="date" value="2010-01-20"/>
日付入力フィールドのレンダリング例(Opera)
日付入力フィールドのレンダリング例(Opera)
日付入力フィールドのレンダリング例(Chrome)
日付入力フィールドのレンダリング例(Chrome)
日付入力フィールドのレンダリング例(Safari)
日付入力フィールドのレンダリング例(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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

バックナンバー

連載:ここが違う!サンプルで見るHTML5

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5