HTML5の新しいフォーム要素

HTML5 の新しいフォーム要素

まず、新機能について説明します:

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

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

次に、それらを 1 つずつ紹介します。

HTML5 <datalist> 要素

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

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

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

<keygen> この要素の目的は、ユーザーを認証するための信頼できる方法を提供することです。 <keygen> タグは、フォームで使用されるキーペアジェネレーターフィールドを指定します。

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="demo-form.php" method="get">
<input list="phone" name="phone">
<datalist id="phone">
  <option value="huawei">
  <option value="oppo">
  <option value="vivo">
  <option value="iphone">
  <option value="sony">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
</body>
</html>

属性値は、ページのロード時に keygen フィールドにフォーカスを設定するために

オートフォーカスを無効にすることを記述します。

GChallenge チャレンジ使用する場合は、送信時に尋ねる keygen の値を設定します。 's s ’s’ s ’t’ - - - ‐------フォームの使用使用3ダウンダウンダウン

KeyType rsa は RSA キーを生成します。フィールド名formを送信するときに、名前属性を使用してフィールドの値を収集します。

HTML5 <output> 要素

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

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

new : HTML5 の新しい属性。属性値は、出力ドメインの出力ドメインに関連する 1 つ以上の要素を記述します。

form form_id 入力フィールドが属する 1 つ以上のフォームを定義します。名前(フォーム送信時に使用します)

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p> </body> </html>

提出するリセットコード

自動運転