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

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

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

HTML5 の新しいフォーム属性

HTML5 の

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

< form>新規属性:

• autocomplete

• novalidate

新しい属性:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例:

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

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

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

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

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

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

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

例:

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

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

ヒント: 一部のブラウザーでは、オートコンプリートを有効にする必要がある場合があります。このプロパティを有効にする関数。

novalidate 属性

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

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

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

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

## formaction 属性

formaction 属性が使用されます。フォーム送信用の URL アドレス。formaction 属性は、 要素の 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>

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>

formmethod 属性

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

formmethod 属性覆盖了 元素的 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>

formnovalidate 属性

novalidate 属性是一个 boolean 属性.

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

formnovalidate 属性会覆盖 元素的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 サイトの他の関連記事を参照してください。