HTML5 表単元素

HTML5 の新しい表单元素

HTML5 は以下の新しい表单元素を持っています:

• <datalist>
• <keygen>
• <output>

注意: すべてのブラウザがHTML5の新しい表单元素をサポートしているわけではありません。しかし、これらの元素はブラウザがサポートしていない場合でも通常の表单元素として表示されます。

HTML5 <datalist> 元素

<datalist> 元素は入力フィールドのオプションリストを定義します。

<datalist> 属性はフォームや入力フィールドがオートコンプリート機能を持つべきことを示します。ユーザーがオートコンプリートフィールドに入力を始めると、ブラウザはそのフィールドに入力済みのオプションを表示します。

この属性は <input> 要素のリスト属性で <datalist> 元素と紐づけます。

实例

<input> 元素が <datalist> で事前定義された値を使用します:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5 <keygen> 元素

<keygen> 元素はユーザーを認証する信頼性の高い方法を提供します。

<keygen> タグはフォーム用の鍵ペア生成フィールドを規定します。

フォームを送信すると、2つの鍵が生成されます。1つは秘密鍵（private key）、もう1つは公開鍵（public key）です。

秘密鍵はクライアントに保存され、公開鍵はサーバーに送信されます。公開鍵は後でユーザーのクライアント証明書を検証するために使用されます。

实例

keygen フィールドを持つフォーム:

<form action="demo_keygen.asp" method="get">
  ユーザー名: <input type="text" name="usr_name">
  暗号化: <keygen name="security">
  <input type="submit">
</form>

HTML5 <output> 元素

<output> 元素は計算やスクリプトの出力など、さまざまな種類の出力に使用されます：

实例

計算結果を <output> 元素に表示します:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100 +
  <input type="number" id="b" value="50">=
  <output name="x" for="a b"></output>
</form>

HTML5 新表单元素

QA

Q: 全てのブラウザがHTML5の新しい表单元素をサポートしていますか？

A: いいえ、一部のブラウザはHTML5の新しい表单元素をサポートしていませんが、サポートしていないブラウザでも通常の表单元素として表示されます。

Q: <keygen> タグの主な目的は何ですか？

A: <keygen> タグはユーザーを認証するための鍵ペアを生成するフィールドを提供します。

Q: <datalist> 元素とは何ですか？

A: <datalist> 元素は入力フィールドのオプションリストを提供し、オートコンプリート機能をサポートします。