SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 この連載では、今日のウェブ業界の流行語となっている「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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
数値(type="number")

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ここが違う!サンプルで見るHTML5連載記事一覧

もっと読む

この記事の著者

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

有限会社futomi 代表取締役1971年岐阜県生まれ。ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。主な著書に『徹底解説HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5652 2011/01/05 16:47

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング