HTML5の新しいフォーム要素

HTML5 の新しいフォーム要素

<datalist>
<keygen>
<output>

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

<datalist> 要素

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

<datalist> 属性は、フォームまたは入力フィールドにオートコンプリート機能が必要であることを指定します。ユーザーがオートコンプリートフィールドに入力を開始すると、ブラウザはそのフィールドに入力されたオプションを表示する必要があります。

<datalist> 要素にバインドされた <input> 要素の list 属性を使用します。

<keygen> 要素 <keygen> 要素の目的は、ユーザーを認証するための信頼できる方法を提供することです。

<keygen> タグは、フォームで使用されるキーペアジェネレーターフィールドを指定します。

フォームが送信されると、2 つのキーが生成されます。1 つは秘密キー、もう 1 つは公開キーです。

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    <input list="fruits" name="fruit">
    <datalist id="fruits">
        <option value="苹果">
        <option value="香蕉">
        <option value="柚子">
        <option value="橙子">
        <option value="梨子">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

プログラムをエディタに入れてローカルで実行して試してみましょう

<output> 要素

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

例

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    用户名: <input type="text" name="usr_name">
    加密: <keygen name="security">
    <input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

プログラムを実行して試してみましょう

HTML5の新しいフォーム要素

<input> タグ定義オプションのリスト。この要素を入力要素と組み合わせて使用して、入力の可能な値を定義します。タグは、フォームに使用されるキーペアジェネレーターフィールドを指定します。 <output><output> タグは、スクリプト出力などのさまざまなタイプの出力を定義します。

タグ	説明
<datalist>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <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> </body> </html>

提出するリセットコード

自動運転