HTML5 の基礎: 第 2 回 入力を編成する

サイトの訪問者と対話する

現在のビジネス手法は、Web およびクラウドを利用するように極めて大きな変化を遂げていますが、HTML5 はこの変化を反映したものになっています。HTML5 での変更内容にスポットライトを当てるこの 4 回連載では、まず新しいタグとページの編成について取り上げるのに続き、Web ページ設計、フォームの作成、API の活用法と価値、そして最後にキャンバスがもたらす独創的な可能性といった高度な話題へと話を進めていきます。2 回目となる今回の記事では、HTML5 のフォーム・コントロールの概念を紹介し、JavaScript と CSS3 の役割についても軽く言及します。

Grace Walker, IT Consultant, Walker Automated Services

イリノイ州シカゴにある Walker Automated Services の共同経営者である Grace Walker は、さまざまな経歴と幅広い経験を持つ IT コンサルタントです。IT 業界では、マネージャー、アドミニストレーター、プログラマー、インストラクター、ビジネス・アナリスト、テクニカル・アナリスト、システム・アナリスト、Web 開発者としての経歴を持ち、その分野は通信、教育、金融サービス、ソフトウェアなど多岐に渡ります。



2011年 7月 01日

企業のような組織がビジネスを展開する上では、ビジネスの運営管理、データ分析、マーケティング戦略の構築などのタスクはいずれも重要になります。しかしその一方で潜在的顧客が利用できる (あるいは、利用してみたくなるような) 見事な Web サイトがなければ、サイトの訪問者を顧客に転じるために必要な最初のプロセスが存在しないことになってしまいます。そこで、好感の持てるユーザー・フレンドリーなエクスペリエンスを提供することで訪問者に対話を促す Web サイトを構築することが、組織にとって第 1 の目標となります。

よく使われる頭文字語

  • API: Application Programming Interface
  • CSS3: Cascading Style Sheets Version 3
  • HTML5: HyperText Markup Language Version 5
  • IT: Information Technology
  • UTC: Coordinated Universal Time

対話性の核心となるのは、サイトのフォームです。フォームによってユーザーとのインタラクティブなやりとりが促進され、その結果としてサイトの訪問者が顧客に転じることで、Web サイトを構築することとなったそもそもの目標へと前進することができます。フォームは、Web サイトの所有者またはエージェントと Web サイトのユーザーとの間で活発なやりとりが行われるようにする上で、中心的な役割を果たします。このため、サイトの設計および開発ではフォームが極めて大きな重要性を持ちます。

フォームの中心となるのは、コントロールです。ラジオ・ボタン、チェック・ボックス、テキスト・ボックス、数字スピナーなどのコントロールは、Web サイトのユーザーがサイトと対話するには欠かせません。言い換えれば、完全に機能するコントロール (これには、コントロールの「機械的」操作と、特定のタスクに対するコントロールの適切性の両方が含まれます) がなければ、対話が生まれるわけはなく、したがって訪問者が顧客に転じる可能性もないということになります。

サイトの訪問者とシステムとの間で行われる対話のあらゆる側面を含め、サイトの訪問者が顧客に転じる転向プロセスでの訪問者とシステムとの関係を慎重に検討することは、サイトを構築する上で不可欠です。ページの検証速度、入力速度、認識速度、ナビゲーション速度、ロード速度、そしてページがどのように作られているかはすべて、この転向プロセスに影響します。HTML5 仕様において、検証が改善および強化されたこと、提供されるフォーム・コントロールの選択肢がより多様になったこと、そして全体的にマルチメディアへの対応力が高まったことはいずれも、HTML5 を使用したサイトへの訪問者が実際のユーザーになる可能性を高めることに寄与しています。

HTML5 は、並外れて強力な検証ツールであり、安定した Web ベースのコンピューティングを全般的に保証します。この極めて重要なセキュリティーを提供する HTML5 は、顧客を勧誘することを目的とする Web サイトを設計および開発する際には特に重要です。したがって、訪問者から顧客への堅調な転向率を維持するには、HTML5 を使用しないわけにはいきません。潜在的顧客の心を引き付けられないとしたら、苦境に立たされます。また潜在的顧客の心を引き付けたとしても、実際の顧客に転じさせられなければ、ビジネスが失敗することは目に見えています。

けれども、そこには救いの手があります。HTML5 の emailtelephone などのタイプは、通信手段の選択肢の幅を広げます。そこに HTML5 のセマンティックな基礎によってもたらされる構造的な明確さが組み合わされば、サイトとの間で明瞭な対話を行う妨げとなるものは何もありません。

ネット中心の世界、急激に確率論的になっているグローバル経済、急速に発展するクラウド・コンピューティング、爆発的に利用が増加しているモバイル技術、そしてクロス・プラットフォームの電気通信ソリューション (営利、非営利ともに含む) のことを考えれば、私たちが Web ベースのコンピューティングと通信がもたらす素晴らしい新世界に踏み出そうとしていることは明らかです。この新しい世界は、通信と IT の機能と、この両者が進化した形で結び付いたことによる新たな派生物、そして競争の激しいグローバル社会のニーズからなる世界です。

フォームの設計

HTML5 では、フォームに大幅な手直しが加えられました。以前は JavaScript のコードを作成する必要があったタスクの一部は、今ではその必要もなく簡単に実行できるようになっています。この記事では、サンプル・フォームを使って HTML5 で革新された一連のフォームの使用方法を分析します。このプロセスで最初のステップとなるのは、当然、フォームの計画です。

図 1 に、これから開発するサンプル・フォームのレイアウトを示します。このフォーム・ページ用に開発する領域は、ヘッダー (Header) 領域、フォーム (Form) 領域、フッター (Footer) 領域の 3 つです。ヘッダー領域には <header></header> タグでラップしたページの見出しとサブ見出しを含め、ページ最下部のフッター領域には <footer></footer> タグでラップした著作権情報を含めます。ヘッダー領域とフッター領域の構造については、連載第 1 回で記載した例で説明しました。<header> タグと <footer> タグを使い慣れていない場合は、第 1 回の記事を参照してください。

図 1. フォーム・ページのレイアウト
ヘッダー、4 つのフィールド・セットを含むフォーム、およびフッターからなるボックス

この記事でのフォームの説明では、以下の 4 つのタグを焦点とします。

  • <form>
  • <fieldset>
  • <label>
  • <input>

HTML5 では、<form> タグに autocompletenovalidate という 2 つの属性が新たに追加されました。autocomplete は、Google のようなサイトで表示される、候補のドロップダウン・リストを使用できるようにするための属性です。novalidate 属性はフォームの検証をオフにするので、テストの際に役立ちます。

<fieldset> タグに追加された新しい属性は、disablenameform の 3 つです。disable 属性は <fieldset> を非アクティブにします。name 属性は <fieldset> の名前を設定します。form 属性の値は <fieldset> に属するフォーム (複数の場合もあります) の ID です。HTML5 では <fieldset> を、それが属するフォームの外部に配置することができます。<fieldset> をフォームの外部に配置する場合には、<fieldset> タグを正しいフォームと関連付けることができるように <fieldset> タグの form 属性を設定してください。

入力要素のカテゴリーを定義する <label> タグにも、form という新しい属性が 1 つ追加されています。form 属性の値は、<label> が属するフォームの ID です。<label> タグについても、フォーム外部に配置できるようになっていて、その場合も同じく、適切なフォームに <label> を関連付けるために form 属性を使用します。

フォームを使いやすくするために、<input> タグには属性だけでなく、新しいタイプもいくつか追加されています。HTML5 の全体的なセマンティック手法に倣い、HTML5 ではデータを編成およびカテゴリー化するための新しい入力タイプを多数導入しています。HTML5 のフォームの機能は、「フォームは機能に従うべきである」という古い格言が適切に言い表しています。

HTML5 でのフォームの <input> フィールドは、<form> タグの外部に配置することができます。form 属性は、入力フィールドが属するフォームを識別するだけでなく、フォームの ID を参照することによって、属性自体が属するフォームも識別します。表 1 に、<input> に新しく追加されたタイプを記載します。

表 1. <input> の新しいタイプ
colordatedatetimedatetime-localmonth
weektimeemailnumberrange
searchtelurl  

表 2 に、<input> の新しい属性を記載します。

表 2. <input> の新しい属性
autocompleteautofocusformformactionformenctype
formmethodformnovalidateformtargetheightmax
minmultiplepatternplaceholderrequired
step    

Web ページを作成する次のセクションでは、これらのタイプと属性のほとんどを使用します。


フォームの作成

図 2 に、The Classical Music Place の Web ページを示します。このサイトでは、複数の作曲家の作品をダウンロードできるだけでなく、クラシック音楽の愛好家が録音した曲をアップロードすることもできます。これが、今から作成するページです。

図 2. The Classical Music Place のフォーム
顧客、好きな作曲家、作曲家、およびファイル・アップロードの各セクションと、さまざまな入力フィールドとドロップダウン・フィールドからなるフォーム

クリックして大きなイメージを見る

図 2. The Classical Music Place のフォーム

顧客、好きな作曲家、作曲家、およびファイル・アップロードの各セクションと、さまざまな入力フィールドとドロップダウン・フィールドからなるフォーム

このフォームの構造は、<form> タグから始まります。この例では、以下に示す新しい autocomplete 属性を使用します。

<form id="orderForm" autocomplete="on"   action="javascript:alertValues();" method="get">

<form> タグに含まれている JavaScript のアクションについては、後のセクションで説明します。

<form> タグには、<fieldset> タグが 4 つ含まれています。フィールド・セットはそれぞれグレーの領域に分けられており、例えば図 2 の一番上のフィールド・セットには、「Name (名前)」、「Telephone (電話番号)」、「Email address (E メール・アドレス)」、および「Date (日付)」のフィールドが含まれています。このように、<fieldset> タグは、フォーム上のコンテンツをグループ化します。ここからは、各 <fieldset> を個別に見ていきます。

最初の <fieldset> タグ

最初の <fieldset> タグに含まれるのは顧客情報です (図 3 を参照)。ここには「Name (名前)」、「Telephone (電話番号)」、「Email address (E メール・アドレス)」、および「Date (日付)」の各フィールドがあります。「Name (名前)」フィールドには autofocus 属性が設定されているため、フィールドをクリックしなくてもテキストの入力を開始することができます。

図 3. 「Customer Info (顧客情報)」のフィールド
名前、電話番号、E メール・アドレス、日付のフィールドからなる「Customer Info (顧客情報)」のフィールド

最初の <fieldset> には、<legend><label>、および <input> タグが含まれます (リスト 1 を参照)。「Name (名前)」フィールドのタイプは text です。このフィールドには新しい <input> 属性のうち、placeholderautofocusrequired の 3 つが設定されています。

リスト 1. 「Name (名前)」フィールド
 <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Enter your name" 
	                      autofocus required size="50">
    </label>
  </p>

autofocus を設定すると、ページが開くと常に、このフィールドに入力フォーカスが置かれることになります。これは、ページがロードされると同時にフォーカスを設定することで、ユーザーがすぐにフォームへの入力を始められるようにするための機能です。

placeholder 属性は、引用符で囲まれたテキスト (プレースホルダー・テキスト) を淡いグレーでフィールドに挿入し、ユーザーに対してフィールドに入力すべき内容を伝えます。プレースホルダー・テキストは、フィールドが空になっていると表示されますが、「Name (名前)」フィールドには autofocus も設定されているので、実際にはページが開いたときにこのプレースホルダー・テキストは表示されず、代わりに黄色の枠でフィールドが強調表示されます。データを入力せずに別のフィールドに移動すると、このプレースホルダー・テキストが表示されます。autofocus 属性を placeholder 属性と一緒に使用すると、フィールド内でフォーカスがアクティブになることから、プレースホルダー・テキストが表示されないことになります。

required 属性を使用すると、フィールドへの入力が必須であることを、フォーム送信の前提条件として簡単に設定することができます。この属性は、テキスト、検索、URL、電話番号、E メール、パスワード、日付ピッカー、数値、チェック・ボックス、ラジオ・ボタン、およびファイル・フィールドに有効です。

「Telephone (電話番号)」フィールドのタイプは tel で、属性には requiredplaceholdersizepattern が使用されます (リスト 2 を参照)。tel タイプは、電話番号が入るように意図されたテキスト・フィールドです。この例の電話番号にはパターンに関する制約があり、この制約には厳密に従わなければなりません。適切なパターンの文字を使用するまで、システムはフォームの送信を許可しないためです。電話番号のプレースホルダーには、入力が突き合わされるパターンを指定します。

パターンは、従来の JavaScript 正規表現 (regex) の機能を模倣したもので、定義された regex のパターンと入力が一致していなければ、その入力は有効になりません。パターンを使用できるタイプは、textsearchurltelephoneemail、および password です。

リスト 2. 「Telephone (電話番号)」フィールド
 <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910" 
	       required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>

「Email address (E メール・アドレス)」フィールドのタイプは email です (リスト 3 を参照)。E メール・アドレスは自動的に検証されるので、パターンを使用する必要はありません。この検証は、HTML5 に含まれる機能です。E メール・アドレスが適切なフォーマットでない場合、フォームを送信することはできません。

リスト 3. 「Email address (E メール・アドレス)」フィールド
  <p>
    <label>Email address:
      <input id="email" name="email" type="email" placeholder="Enter your email address" 
	            required size="50">
    </label>
  </p>

この <fieldset> の最後のエントリーは「Date (日付)」フィールドです。date タイプは、Google Chrome ではスピナーを作成しますが (図 3 を参照)、Opera ブラウザーでは日付を選択するためのカレンダー・ピッカーが提供されます。図 4 に示すのは、Opera でこの Web ページの「Date (日付)」フィールド・ピッカーを表示したところです。Chrome で角丸を設定するスタイル・シートと同じものを Opera で使用したとしても、Operaではフィールド・セットの角は丸くならないことに注意してください。

図 4. 「Date (日付)」フィールド
日付を選択するためのカレンダーを表示する「Date (日付)」フィールド

リスト 4 に、日付ピッカーを作成するために使用したコードを記載します。

リスト 4. 「Date (日付)」フィールド
    <p>
      <label>Date: <input type="date">
      </label>
    </p>
 </fieldset>

レポートは、任意の日付を対象に生成することができます。さらに、日付を時間単位に細分化することもできます。作成できる日付タイプを以下に示します。

  • date: 日、月、年を選択します。
  • month: 月と年を選択します。
  • week: 週と年を選択します。
  • time: 時刻 (時と分) を選択します。
  • datetime: 時刻、日、月、年 (UTC 時間) を選択します。
  • datetime-local: 時刻、日、月、年 (現地時間) を選択します。

2 番目の <fieldset> タグ

2 番目の <fieldset> タグに含まれるのは、list 属性を設定した <input> タグと、<datalist> タグです。list 属性が入力フィールドの <datalist> を指定し、<datalist> タグが入力フィールドの選択肢のリストを表示します。list 属性が有効に機能する <input> のタイプには、textsearchurltelephoneemaildate pickersnumberrangecolor があります。

<datalist> は、ドロップダウン・リストに表示されます (図 5 を参照)。この画像は Opera で撮ったものであり、Chrome ではこのリストは単純なテキスト・ボックスとして表示されます。このため、Chrome の場合、ユーザーにはリストが提示されません。

図 5. 「Favorite Composer (好きな作曲家)」のフィールド
作曲家のドロップダウン・リストが表示される「Favorite Composer (好きな作曲家)」のフィールド

リスト 5 に、「Favorite Composer (好きな作曲家)」セクションを作成するフィールド・セットを記載します。

リスト 5. 「Favorite Composer (好きな作曲家)」のフィールド
<fieldset>
  <legend> Favorite Composer </legend>
  <p>
    <label>
  <input type="text" name="favorites" list="composers">
  <datalist id="composers">
   <option value="Bach">
   <option value="Beethoven">
   <option value="Brahms">
   <option value="Chopin">
   <option value="Mendelssohn">
  </datalist>
 </label>
</p>
</fieldset>

3 番目の <fieldset> タグ

3 番目の <fieldset> タグは、作曲家のリストに続き、リストに含まれる作曲家ごとに入手可能な作品数を指定する数値フィールドを表示します。図 6 に、このセクションを示します。

図 6. 「Composers (作曲家)」のフィールド
5 人の作曲家に対応するフィールドが表示された「Composers (作曲家)」セクション。それぞれのフィールドにドロップダウン・リストがあります。

例えば、バッハの作品は 5 曲あり、ベートーベンの作品は 10 曲あります。作曲家ごとの最大作品数は、リスト 6 に示されているとおりです。フォームを送信する際に、この数値フィールドはこの最大値を超える値を受け入れません。フォームを送信すると、フィールドは誤った範囲外の値に対し、このフィールドに許容される数値制限に従って入力を訂正するように求めるプロンプトを出して応答します。

number タイプは入力のスピナー・フィールドを作成します。number タイプでは、minmax、および step を使用します。デフォルトの step 値は 1 です。minmaxstep 属性は、数値、範囲、または日付ピッカーの入力を制限するために使われます。max 属性は入力フォールドの許容最大値を決定し、min 属性は入力フィールドの許容最小値を決定します。step 属性が決定するのは、有効な増分値です。

リスト 6. 「Composers (作曲家)」のフィールド
<fieldset>
  <legend>Composers</legend>
  <p>
    <label>
      Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
    </label>
  </p>
  <p>
    <label>
      Beethoven: <input name="form_number" id="form_number" type="number" 
	      min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
    </label>
  </p>
  <p>
    <label>
      Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Mendelssohn: <input name="form_number" id="form_number" type="number" 
	     min="1" max="4">
    </label>
  </p>

 </fieldset>

4 番目の <fieldset> タグ

4 番目の <fieldset> タグには、file というタイプと multiple という属性が含まれる <input> があります (図 7 を参照)。multiple 属性は、入力フィールドでデータ・リストまたはファイル・リストから複数の値を選択できることを指定する属性です。この例では、ユーザーが複数のファイルを選択してアップロードできるようになっています。

リスト 7. 「Upload file(s) (ファイルのアップロード)」のフィールド
「Choose File (ファイルの選択)」ボタンがある「Upload file(s) (ファイルのアップロード)」のセクション

リスト 7 に、<input> に file というタイプと multiple という属性が指定されたコードを記載します。

リスト 7. 「Upload file(s) (ファイルのアップロード)」のフィールド
 <fieldset>
  <legend> Upload file(s) </legend>
  <p>Upload one of your orchestra's file(s) for inclusion in our library</p>
    <p><label> 
      <input type="file" multiple="multiple" /> 
    </label>
  </p>
 </fieldset>

Submit (送信)」ボタンは height 属性と width 属性を使用します (リスト 8 を参照)。この 2 つの属性は、タイプが image の入力の高さと幅を設定するためのものです。これらの属性を設定すると、ページに画像を表示するための空間領域は、事前に設定された幅と高さのサイズによる制約で固定されます。これによって、ページ・レンダリングの有効性が一層高まり、ページをロードしやすくなるというわけです。

リスト 8. 「Submit (送信)」ボタン
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>

JavaScript と CSS3

HTML5 による「演出」は、CSS3 なしではあり得ません。さらに、HTML5 ではある程度 JavaScript コードの必要性を排除しているものの、それでも JavaScript は貴重なツールです。これから、サンプル・フォームを作成するために使用した JavaScript コードと CSS3 ファイルを紹介します。

リスト 9 に記載する JavaScript コードは、3 つの必須フィールドを返す単純なアラート・ボックスです。ここで使用している JavaScript コードはわずか 1 行しかありませんが、JavaScript を使用する際のベスト・プラクティスに従って、このコードは独立した JavaScript ファイルに置かれています。

リスト 9. サンプル・フォームの JavaScript コード
function alertValues()
{
alert("Customer information: " + "\n     " + fullname.value + "\n     " 
                 + tel.value + "\n     " + email.value);  
}

リスト 10 に、サンプル・フォームのフォーマットを設定する CSS3 コードを記載します。ここには <header> および <footer> の情報は含まれていません。

リスト 10. サンプル・フォームの CSS3
form {
  width: 550px;
  margin: 0 0 0 0 ;
  padding: 50px 60px;
  background-color: #2d2d2d;
  border-radius: 20px;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px ;
  border: 2px solid #ffffff;
  background: #B8B8B8 ;
  border-radius: 10px;
}

legend {
  color: #ffffff;
  background: #990033;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  margin: 0;
  width: 10em;
  border: 2px solid #660033;
  border-radius: 5px;
 }

label {
  display: block;
  float: left;
  clear: left;
  text-align: left;
  width: 100%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 0;
}

まとめ

個人と組織が成功する鍵は、コミュニケーションです。このプロセスには、フォームのコントロールと全体的なページ構造の指針が極めて重要になります。そして HTML5 では、このタスクに適した、並外れて強力なツール一式を揃えています。将来のために HTML5 を使えるように準備をする人たち (その将来はもう現在になっていますが) にはメリットがあるはずです。そしてそうでない人たちは、Web で 1 つにつながったネット中心のグローバル社会のペースと要求にひどく打ちのめされることでしょう。


ダウンロード

内容ファイル名サイズ
Example HTML, CSS3 and JavaScript files HTML5Forms.zip10KB

参考文献

学ぶために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=682412
ArticleTitle=HTML5 の基礎: 第 2 回 入力を編成する
publish-date=07012011