ホームページ  >  記事  >  ウェブフロントエンド  >  新しい HTML5 フォーム要素のグラフィックとテキストの例

新しい HTML5 フォーム要素のグラフィックとテキストの例

零下一度
零下一度オリジナル
2017-07-16 15:44:501962ブラウズ

この記事では、html5 の新しい フォーム要素とフォーム 属性 を紹介します。

まず、HTML5 のフォームの新しい機能について説明します。以前の HTML では、フォーム要素はフォーム要素内に配置する必要がありました。その後、フォームを追加します。 form 属性の値は、次のように form フォームの ID です:

[html] view plain copy 
<form method="get" id="test">  
      <input type="text" name="name"/>  
      <input type="password" name="password"/>  
      <input type="submit" value="提交">  
 </form>  
<input type="text" name="confirm" form="test">

form 要素を使用して取得する場合、form 要素に form 属性を追加する必要はありません。すべての form 要素の値を指定する場合、input、select、textarea などの要素はすべて、form 要素の外側に form 属性を追加する必要があります。

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

fc86e7b705049fc9d4fccc89a2e80ee3aa983b9eb8086376f1f6481364a02e5a
be6d67dae90cc1ad6469079e163d0939

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

HTML5 fc86e7b705049fc9d4fccc89a2e80ee3 要素

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

fc86e7b705049fc9d4fccc89a2e80ee3 属性は、フォームまたは入力フィールドに

auto-complete 関数が必要であることを指定します。ユーザーがオートコンプリート フィールドに入力を開始すると、ブラウザはそのフィールドに入力されたオプションを表示する必要があります。

<!DOCTYPE html>
<html>
<body>

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9(更早IE版本),Safari不支持 datalist 标签。</p>

</body>
</html>

要素にバインドするには、d5fd7aea971a85678ba271703566ebfd 要素の list 属性を使用します。

HTML5 aa983b9eb8086376f1f6481364a02e5a 要素

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

aa983b9eb8086376f1f6481364a02e5a タグは、フォームで使用されるキー ペア

generator

フィールドを指定します。

フォームが送信されると、2 つのキーが生成されます。1 つは秘密キー、もう 1 つは公開キーです。 秘密鍵はクライアントに保存され、公開鍵はサーバーに送信されます。公開キーは、後でユーザーのクライアント証明書を検証するために使用できます。

<!DOCTYPE html>
<html>
<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>


HTML5 be6d67dae90cc1ad6469079e163d0939 要素

be6d67dae90cc1ad6469079e163d0939 要素は、計算やスクリプト出力などのさまざまなタイプの出力に使用されます。 HTML5の新機能フォーム要素

以上が新しい HTML5 フォーム要素のグラフィックとテキストの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。