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

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

零下一度
リリース: 2017-07-16 15:44:50
オリジナル
2025 人が閲覧しました

この記事では、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 要素

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート