|
|---|
この連載が本になりました！
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!
HTML5マークアップ 現場で使える最短攻略ガイド
定価：2,808円 （本体2,600円）／形態：B5変 (240ページ)
ISBN：978-4-04-866070-9
前回は、一般的なWebサイト制作で比較的使用頻度が高い要素や、ルビ関連の要素を紹介しました。第7回は、HTML5で追加されたフォーム関連の要素と属性をまとめてチェックします。これらの中には、スマートフォンサイト用のブラウザーなどですでに実用できるものも含まれています。
各要素の解説では、冒頭に「カテゴリー」と「コンテンツモデル」という項目が登場します。カテゴリーとコンテンツモデルについては、第5回を参照して復習してください。
HTML5のグローバル属性
以降の解説で登場する「グローバル属性」とは、すべての要素で使用できる属性のことを表します。HTML5のグローバル属性には、以下のものがあります。
accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title 独自データ属性（data-*）
また、本稿の域を出てしまうので詳細は割愛しますが、JavaScriptで使用するイベントハンドラー（onclickやonsubmitなど）や、WAI-ARIA（W3Cが定めたアクセシビリティ向上のための技術仕様）のroleとaria-*などもグローバル属性です。
フォーム関連要素のカテゴリー
HTML5のフォームパーツは、フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツなどの通常のカテゴリーに加えて、いくつかのカテゴリーに属しています。
・フォーム関連要素
フォーム関連要素は、form要素と関連を持てる要素です。フォーム関連要素は、これまでのHTMLのようにform要素の中に記述するか、HTML5で登場したform属性を使用してform要素に関連付けられます。
・リスト化要素
form.elements APIとfieldset.elements APIにリストされる要素です。これらのAPIは、JavaScriptなどから使用できます。
・ラベル付け可能要素
label要素と関連付けることで、ラベル付けできる要素です。ちなみに、input要素はtype属性の値がhiddenの場合、ラベル付けできません。
・送信可能要素
フォームが送信されるときに、フォームデータセットの構築に使用できる要素。フォームデータセットとはフォーム送信者がフォームに入力・設定したデータのかたまりのことです。
・リセット可能要素
フォームがリセットされる際に影響を受ける要素です。
パルパブルコンテンツとは
パルパブルコンテンツ（Palpable content）は、2012年3月29日版のWorking Draftで追加されたHTML5のカテゴリーで、「明白（明瞭）なコンテンツ」という意味です。
仕様書では、「コンテンツモデルがフローコンテンツかフレージングコンテンツである要素は、基本的に、hidden属性が指定されていないパルパブルコンテンツを内容に持つべきである」とされています。「明白なコンテンツ」と言われると考え込んでしまいますが、何らかの具体的な意味を持つコンテンツと捉えると分かりやすいかもしれません。たとえば、br要素やhr要素、半角スペースのみのテキストなどは、明瞭なコンテンツではありません。
なお、JavaScriptで後からコンテンツが追加される場合には、内容を持たない要素を記述することがありますが、このようなケースが禁止されるわけではありません。
以下が、パルパブルコンテンツに属する要素です。
a abbr address article aside audio (controls属性を持つ場合) b bdi bdo blockquote button canvas cite code data details dfn div dl (dtとddが一組以上ある場合) em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup i iframe img input (type属性の値がhiddenでない場合) ins kbd keygen label map mark math menu (type属性の値がtoolbarかlistの場合) meter nav object ol (子要素に一つ以上のli要素を持つ場合) output p pre progress q ruby s samp section select small span strong sub sup svg table textarea time u ul (子要素に一つ以上のli要素を持つ場合) var video テキスト（半角スペースのみは除く）
input要素
フォーム関連要素でもっとも大きく変わったのがinput要素です。詳しく見ていきましょう。
- カテゴリー：フローコンテンツ、フレージングコンテンツ、【type属性がhiddenでない場合：インタラクティブコンテンツ、パルパブルコンテンツ、フォーム関連要素（リスト化要素、ラベル付け可能要素、送信可能要素、リセット可能要素）】、【type属性がhiddenの場合：フォーム関連要素（リスト化要素、送信可能要素、リセット可能要素）】
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：空
- コンテンツ属性：グローバル属性、accept、alt、autocomplete、autofocus、checked、dirname、disabled、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、maxlength、min、multiple、name、pattern、placeholder、readonly、required、size、src、step、type、value、width
input要素はこれまでもフォームにおいて多用されてきました。主なコントロール（ユーザーインターフェイス部品）にテキスト入力ボックス、チェックボックス、ラジオボタン、送信ボタンなどがありますが、最近のWebサイトやWebアプリケーションでは以下のようにさまざまなコントロールが使われています。
Google Analyticsで使用されている、カレンダー型コントロール
flickrで写真をアップロードする時に使用されているプログレスバー
これらのコントロールの多くはJavaScriptで実装されていますが、HTML5ではHTMLだけで実装できるようになりました。ブラウザーが対応していれば、JavaScriptを使用せずともカレンダーやプログレスバーのようなコントロールが使えるのです。
input要素の新しいtype属性値
HTML5で新たに登場したフォームパーツの多くは、input要素のtype属性に新しい値を指定することで利用できます。
search
<input type="search" name="q" />
type属性の値に「search」を指定すると、フォームパーツは検索ボックスになります。検索ボックスは機能的にはtype="text"のテキストボックスと変わりませんが、Mac版のChromeやSafariなど一部のブラウザーでは見た目が変化します。
Mac版Chromeのスクリーンショット。角丸の入力フォームに変わる
iPhoneでは、ソフトウェアキーボードの構成が検索用に変化します。
iPhoneのスクリーンショット。右下のボタンが「検索」になっている
tel
<input type="tel" name="tel" />
type属性の値に「tel」を指定すると、フォームパーツは電話番号の入力欄になります。とは言え、主要ブラウザーでは特に何かの機能があるわけではなく、入力内容が電話番号のみに制限されるわけでもありません。
Operaのスクリーンショット。特に見た目は変わらない
iPhoneではソフトウェアキーボードがテンキーに変わるので、ユーザーが番号を入力しやすくなります。
iPhoneのスクリーンショット。キーボードを呼び出すとテンキーが現れる
url
<input type="url" name="url" />
「url」を指定すると、フォームパーツはURLの入力欄になります。Operaなど一部のブラウザーでは、url以外の内容を入力して送信しようとするとエラーが表示されます。
エラーが発生した時のOperaのスクリーンショット
iPhoneではソフトウェアキーボードに「.com」や「/」などのキーが表示されるので便利です。
iPhoneのスクリーンショット。キーボード下部に、URL入力に多用する「.」「/」「.com」が配置されている
<input type="email" name="email" />
「email」を指定すると、フォームパーツはメールアドレスの入力欄になります。Operaなどではメールアドレス以外の内容を入力して送信しようとするとエラーが表示されます。
エラーが発生した時のOperaのスクリーンショット
iPhoneではソフトウェアキーボードに「@」マークが表示され、利便性が向上します。
iPhoneのスクリーンショット。キーボード下部にemail入力に多用する「@」「.」が配置されている
また、multiple属性を指定すると、複数のメールアドレスをカンマ区切りで入 力できるようになります。
<input type="email" name="email" multiple="multiple" />
