ホームページ > 記事 > ウェブフロントエンド > HTML5 のフォーム要素
HTML 5 の新しいフォーム要素: HTML 5 には、フォームに関連するいくつかの要素と属性があります。
この章では、datalist、keygen、output という新しいフォーム要素を紹介します。
datalist要素
datalist要素は、入力フィールドのオプションのリストを指定します。
リストはデータリスト内のオプション要素を通じて作成されます。データリストを入力フィールドにバインドする必要がある場合は、入力フィールドの list 属性を使用してデータリストの ID を参照してください。例:
<!DOCTYPE HTML> <html> <body> <form action="demo_form.php" method="get"> <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> </body> </html>
ヒント: option 要素は常に value 属性を設定する必要があります。
keygen 要素
keygen 要素の役割は、ユーザーを認証するための信頼できる方法を提供することです。
keygen 要素はキーペアジェネレーターです。フォームが送信されると、2 つのキーが生成されます。1 つは秘密キー、もう 1 つは公開キーです。秘密キーはクライアントに保存され、公開キーはサーバーに送信されます。公開キーは、後でユーザーのクライアント証明書を検証するために使用できます。
現在、ブラウザーによるこの要素のサポートは、セキュリティ標準として有用であるほど不十分です。
例:
<!DOCTYPE HTML> <html> <body> <form action="demo_form.php" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> </body> </html>
output要素
output要素は、計算やスクリプト出力など、さまざまなタイプの出力に使用されます。
例:
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用output 元素的简易计算器:</p> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form> </body> </html>
上記は HTML5 のフォーム要素の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。