HTML5 フォーム要素

HTML5 の新しいフォーム要素

HTML5 には以下の新しいフォーム要素があります:

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

注意:すべてのブラウザがHTML5の新しいフォーム要素をサポートしているわけではありませんが、それらを使用できます。ブラウザがフォーム属性をサポートしていない場合でも、通常のフォーム要素として表示されます。

HTML5 <datalist> 要素

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

<datalist> 属性は、form または input フィールドに自動補完機能を持たせるべきことを規定します。ユーザーが自動補完フィールドに入力し始めると、ブラウザはそのフィールドに記入するオプションを表示します:

<input> 要素の list 属性を使用して <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つは秘密鍵、もう1つは公開鍵です。

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

この要素は廃止されており、使用は推奨されません。代替手段は次のとおりです:

1. JavaScript で Web Cryptography API を使用して鍵を生成する

2. 専用の暗号ライブラリを使用する

例

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 の新しいフォーム要素