新しい HTML5 フォーム要素のグラフィックとテキストの例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

零下一度

Jul 16, 2017 pm 03:44 PM

h5 html5 形状

この記事では、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 には次の新しいフォーム要素があります:




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

HTML5 要素

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

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

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>

ログイン後にコピー

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

HTML5 要素

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

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

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 要素