简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ> ウェブフロントエンド> フロントエンドQ&A> 本文

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

青灯夜游
リリース： 2022-02-25 17:49:17
オリジナル
4879 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。

例:

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

 E-mail:
ログイン後にコピー

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

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

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

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

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

例:

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

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

novalidate 属性

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

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

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

 E-mail:
ログイン後にコピー

##formaction 属性

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

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

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

 First name: 
 Last name:
ログイン後にコピー

formenctypeattribute

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

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

例:

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

 First name:
ログイン後にコピー

formmethod 属性

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

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

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

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

 First name: 
 Last name:
ログイン後にコピー

formnovalidate 属性

novalidate 属性是一个 boolean 属性.

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

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

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

示例：

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

 E-mail:
ログイン後にコピー

【推荐课程：HTML5视频教程、web前端入门教程】

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

関連ラベル：
html5
ソース：php.cn
前の記事：html5の主な構造要素は何ですか 次の記事：CSS3 レイアウト プロパティとは何ですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascriptを使用してHTML5の必須属性を設定するにはどうすればよいですか? JavaScriptでテキスト入力ボックスを必須としてマークしようとしています。
から 2023-10-13 08:52:25
0
2
317
正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する このピクセル効果をフロントエンドの専門家に作成してもらいたいと考えています。全画面キャンバスでピクセル効果全体を実現することはできますが、 constcanvas=getEleme...
から 2023-09-12 12:20:33
0
1
280
Base64 でエンコードされた HTML5 ビデオ M3U8 HTML5 の Video タグに Base64 でエンコードされた M3U8 ファイルを追加したいのですが、どうすればよいですか
から 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: onclick イベント メソッドが呼び出されません。エラー「変数が見つかりません: updateDocument」 フロントエンド開発は初めてですが、HTML5、CSS、JavaScript については基本的に理解しています。 vue.js プロジェクトを作成し、ブートストラップと axios ...
から 2023-09-09 20:06:48
0
1
362
XHTML のイメージタグから終了スラッシュ '/' を削除する 画像を保存する文字列 txt1 があります。その値は XHTML 形式です。つまり、要素は閉じられています。ただし、HTML5 と同じようにするには、終了スラッシュを削除する必要が...
から 2023-09-06 12:15:38
0
1
240
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！