ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5の新しいフォーム属性とは何ですか

HTML5の新しいフォーム属性とは何ですか

青灯夜游
青灯夜游オリジナル
2022-02-25 17:33:115078ブラウズ

html5 の新しいフォーム属性には、autocomplete、novalidate、autofocus、form、formaction、formmethod、formnovalidate、formtarget、list、min、max、step などが含まれます。

HTML5の新しいフォーム属性とは何ですか

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 の新しいフォーム属性

HTML5 の ff9c23ada1bcecdd1a0fb5d5a0f18437 タグと d5fd7aea971a85678ba271703566ebfd タグに、いくつかの新しい属性が追加されました。

80e4a4b497ba87d4db7bd7777678eee0新規属性:

  • autocomplete

  • novalidate

d5fd7aea971a85678ba271703566ebfd新しい属性:

  • autocomplete: オートコンプリート。次の入力候補のために以前に送信されたデータを自動的に記録するかどうか。

  • #autofocus: 入力フォーカスを自動的に取得します。

  • form: 値はフォームの ID です。設定すると、入力フィールドをフォームの外に配置できます。

  • formaction: フォームの送信を記述するために使用される URL アドレス

  • formenctype: サーバーに送信されたフォームのデータ エンコーディングを記述します (のみフォームの場合、method="post" form の場合)

  • formmethod: フォーム送信の方法を定義します。

  • formnovalidate: フォームの送信時に d5fd7aea971a85678ba271703566ebfd 要素を検証する必要がないことを示します。

  • formtarget: フォーム送信データを受信した後の表示を示す名前またはキーワードを指定します。

  • 高さと幅: 画像タイプの タグに使用される画像の高さと幅を指定します。

  • list: 入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。

  • min と max: 入力数値の最小値または最大値を制限します。

  • multiple: この属性が指定されている場合、複数の入力値を許可するかどうかが宣言されている場合、入力ボックスに複数のカンマ区切り値が許可されます。

  • パターン (正規表現): 入力を検証するための正規表現を指定します。 (通常のデフォルトでは先頭と末尾に ^$ が追加されます)

  • プレースホルダー: 入力ボックスにプロンプ​​ト テキストを表示するために使用されるプレースホルダーです。値とは異なり、送信できません。

  • 必須: フォームを送信すると、入力があるかどうかが確認され、入力がない場合はプロンプト メッセージが表示されます。

  • step: min と組み合わせて使用​​される、入力数値のステップ サイズを制限します。

  • maxlength: 最大長を制限します。入力がある場合にのみ役立ちます。中国語と英語は区別されません。

  • minlength: 最小長を制限しますが、これは H5 標準属性ではなく、一部のブラウザでのみサポートされます。

#ff9c23ada1bcecdd1a0fb5d5a0f18437 novalidate 属性novalidate 属性はブール属性です。

novalidate 属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。

例:

送信されたフォーム データを検証する必要はありません

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit"></form>

##ff9c23ada1bcecdd1a0fb5d5a0f18437 または d5fd7aea971a85678ba271703566ebfd オートコンプリート属性

autocomplete 属性は、フォームまたは入力フィールドにオートコンプリート機能が必要であることを指定します。

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

ヒント: autocomplete 属性は、form 要素でオンにし、input 要素でオフにすることができます。

注: オートコンプリートは、ff9c23ada1bcecdd1a0fb5d5a0f18437 タグに加えて、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、色などの d5fd7aea971a85678ba271703566ebfd タグのタイプにも適用されます。

例:

フォームでオートコンプリートをオンにする (入力フィールドのオートコンプリートをオフにする):

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
ヒント: 一部のブラウザーでは、オートコンプリートを有効にする必要がある場合があります。このプロパティを有効にする関数。

ff9c23ada1bcecdd1a0fb5d5a0f18437 novalidate 属性

novalidate 属性はブール (ブール) 属性です。

novalidate 属性フォームに指定されているか、フォームを送信するときに入力フィールドを検証しないでください。

例: 送信されたフォーム データの検証なし

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

##d5fd7aea971a85678ba271703566ebfd formaction 属性

formaction 属性が使用されます。フォーム送信用の URL アドレス。formaction 属性は、ff9c23ada1bcecdd1a0fb5d5a0f18437 要素の action 属性をオーバーライドします。

注: formaction 属性は、type="submit" および type に使用されます。 =" image".

例: 次の HTMLform フォームには、異なるアドレスを持つ 2 つの送信ボタンが含まれています:

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

d5fd7aea971a85678ba271703566ebfd formenctypeattribute

formenctype 属性は、サーバーに送信されたフォームのデータ エンコーディングを記述します (フォーム フォーム内の Method="post" フォームのみ)formenctype 属性は、サーバーに送信されたフォームの enctype 属性をオーバーライドします。フォーム要素。

Main: この属性は、type="submit" および type="image" とともに使用されます。

例:

最初の送信ボタンにはフォーム データを送信するためのデフォルトのエンコーディングがあり、2 番目の送信ボタンには「multipart/form-data」エンコーディング形式でフォーム データが送信されます。

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

d5fd7aea971a85678ba271703566ebfd formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

示例:重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

d5fd7aea971a85678ba271703566ebfd formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 d5fd7aea971a85678ba271703566ebfd 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

示例:

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

【推荐课程:HTML5视频教程web前端入门教程

以上がHTML5の新しいフォーム属性とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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