このページの本文へ

input要素だけじゃない HTML5のフォーム新機能

2012年06月22日 11時00分更新

浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷
連載インデックスへ

この連載が本になりました!

「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!

HTML5マークアップ 現場で使える最短攻略ガイド

定価:2,808円 (本体2,600円)/形態:B5変 (240ページ)
ISBN:978-4-04-866070-9

 前回に続き、HTML5で強化されたフォーム機能について解説します。

新しいフォーム関連要素

 HTML5のフォームでは、input要素が強化されただけでなく、新しいフォーム要素も追加されました。

datalist要素

  • カテゴリー:フローコンテンツ、フレージングコンテンツ
  • この要素が使える文脈:フレージングコンテンツが予想される場所
  • コンテンツモデル:次のどちらか。フレージングコンテンツ、0個以上のoption要素
  • コンテンツ属性:グローバル属性

 datalist要素は、他のフォームパーツに対してサジェスト(入力候補)を提供します。サジェストする項目は、datalist要素内にoption要素を使って記述します。

 サジェスト表示の対象となるフォームパーツとdatalist要素は、フォームパーツ側にlist属性、datalist要素側にid属性を指定し、両者の値を同じにすることで紐付けます。


<input type="search" name="q" placeholder="検索ワード" list="search_word_suggest" />
<datalist id="search_word_suggest">
<option value="カメラ話"></option>
<option value="雑記"></option>
<option value="Web話"></option>
</datalist>
スクショ:ss/datalist.png
Operaのスクリーンショット

 datalite要素内のoption要素にlabel属性を記述すると、補助的な情報を表示できます。このlabel属性の値はあくまでも補助的な情報ですので、サーバーに送信されません。

 ただし、Operaではlabel属性の値がサジェストの右端に表示されるのに対して、Firefox 12ではlabel属性の値のみが表示されてしまいます。


<input type="search" placeholder="検索ワード" list="search_word_suggest" />
<datalist id="search_word_suggest">
<option value="カメラ話" label="約150件"></option>
<option value="雑記" label="約340件"></option> 
<option value="Web話" label="約120件"></option>
</datalist>
スクショ:ss/datalist_2.png
Operaのスクリーンショット。サジェストの右側にlabel属性の値が表示される
スクショ:ss/datalist_3.png
Firefox12のスクリーンショット。labelの値のみが表示される

 datalist要素のコンテンツモデルには、option要素だけでなく、フレージングコンテンツも含まれています。たとえば、以下のようにdatalist要素内にselect要素を記述すると、datalist要素に対応しているブラウザーでは無視され、対応していないブラウザーではフォールバックコンテンツとして表示されます。


<input type="search" placeholder="検索ワード" list="search_word_suggest" />
<datalist id="search_word_suggest"><select name="q">
<option value="">検索ワードを選択</option>
<option value="カメラ話">カメラ話</option>
<option value="雑記">雑記</option>
<option value="Web話">Web話</option>
</select></datalist>
スクショ:ss/datalist_3.png
datalist要素に対応していないIE8のスクリーンショット。select要素として表示されてる

output要素

  • カテゴリー:フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ、フォーム関連要素(リスト化、ラベル付け可能、リセット可能)
  • この要素が使える文脈:フレージングコンテンツが予想される場所
  • コンテンツモデル:フレージングコンテンツ
  • コンテンツ属性:グローバル属性、for、form、name

 output要素は、計算結果を表します。以下のサンプルでは、フォームに数値を入力すると自動的に掛け算が行なわれ、計算結果が表示されます。


<form onsubmit="return false" oninput="o.value = a.valueAsNumber * b.valueAsNumber">
<input name="a" type="number" step="1" value="0" /> ×
<input name="b" type="number" step="1" value="0" /> =
<output name="o"></output>
</form>
スクショ:ss/output.png
Operaのスクリーンショット

 output要素のfor属性を使うと、計算に使われる要素と明示的に紐付けられます。対象となる要素にid属性、output要素にfor属性を指定し、両者の値を同じにすることで紐付けます。

 以下のサンプルのように複数の要素と紐付ける場合には、半角スペース区切りで複数の値を記述します。


<form oninput="c.value = a.valueAsNumber * b.valueAsNumber">
<input name="a" id="a" type="number" step="1" value="0" /> ×
<input name="b" id="b" type="number" step="1" value="0" /> =
<output name="c" for="a b"></output></form>

keygen要素

  • カテゴリー:フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ、フォーム関連要素(リスト化、ラベル付け可能、送信可能、リセット可能)
  • この要素が使える文脈:フレージングコンテンツが予想される場所
  • コンテンツモデル:空
  • コンテンツ属性:グローバル属性、autofocus、challenge、disabled、form、keytype、name

<keygen keytype="rsa" name="key" />

 keygen要素は、公開鍵暗号方式の鍵ペアジェネレータを表します。フォームが送信される時に鍵ペアを生成し、秘密鍵はローカルの鍵ストアに格納され、公開鍵がサーバーに送信されます。

Operaのスクリーンショット
Operaのスクリーンショット

 keytype属性は鍵の種類を指定する列挙属性です。属性値は、仕様ではrsaのみ規定されています。値が指定されなかった場合は、ブラウザーがrsaをサポートしていればデフォルト値のrsaになります。

ポイント

公開鍵暗号方式(Public Key Cryptosystem)とは、暗号化と復号に別々の鍵を使い、セキュリティを高めた暗号方式です。詳しくは、ASCII.jpデジタル用語辞典などの解説も参考にしてください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング