HTML5 フォーム要素
HTML5 新たなフォーム要素
HTML5 のフォームには、いくつかの新たな要素と属性があります。
この章は、次のフォーム要素をカバーします:
- <datalist>
- <keygen>
- <output>
ブラウザ・サポート
タグ |
IE |
Firefox |
Opera |
Chrome |
Safari |
<datalist> |
No |
4.0 |
9.5 |
No |
No |
<keygen> |
No |
4.0 |
10.5 |
3.0 |
No |
<output> |
No |
4.0 |
9.5 |
10.0 |
5.1 |
<datalist> 要素
<datalist> 要素は、入力フィールドの選択肢のリストを指定します。
リストは、datalist の中の option 要素で作成します。
<datalist> を入力フィールドとバインドするためには、入力フィールドの
list 属性に datalist の id を参照させるようにします:
例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com"
/>
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com"
/>
</datalist>
Try it yourself »
チップ: <option> 要素には、必ず value がなければなりません。
<keygen> 要素
<keygen> 要素の目的は、ユーザを認証するための安全な方法を提供することです。
<keygen> 要素は、鍵をペアで生成します。フォームを送信すると、
秘密鍵と公開鍵の2つの鍵が生成されます。
秘密鍵はクライアントに保存され、公開鍵はサーバに送られます。
公開鍵は、将来的にユーザの認証にクライアント証明書を生成するために使用することができます。
現在、この要素のブラウザサポートは、有益なセキュリティ標準であるほど十分ではありません。
例
<form action="demo_form.html" method="get">
Username: <input type="text" name="usr_name" />
Encryption:
<keygen name="security" />
<input type="submit" />
</form>
Try it yourself »
<output> 要素
<output> 要素は、計算またはスクリプトの出力のような、いろいろな出力タイプのために使用します:
例
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
Try it yourself »
HTML5 新フォーム要素
|