HTMLのform要素を理解するforms_html/css_WEB-ITnose

ディレクトリ [1] フォーム名 [2] 文字セット [3] 送信アドレス [4] 開封方法 [5] データエンコーディング [6] データ送信 [7] オートコンプリート [8] フォーム検証

前の単語

フォームは、Web ページとユーザー間の対話ツールであり、コンテナとしての ff9c23ada1bcecdd1a0fb5d5a0f18437 要素と、6c04bd5ca3fcae76e30b72ad730ca86d 要素で使用できるその他のタグで構成されます。フォームには、d5fd7aea971a85678ba271703566ebfd、c6a426b716b67faae9e8e9944678968a、4750256ae76b6b9d804861d8f69e79d3、2b5469ab79cf842344327415c3b3bb95、e911751791aa3ba95dc724e2fb905976、2e1cf0710519d5598b1f0f14c36ba674 およびその他のフォーム制御要素を含めることができます

[注] フォーム内でフォームをネストすることはできません

form 要素

form 要素には、accept-charset、action、autocomplete、enctype、method、name、novalidate、target の合計 8 つの属性があります。

Form name

属性は必須です。 name 属性は、フォーム名を指定します。 name= "test" の場合、JavaScript は document.forms.test を使用してフォームを取得できます

<form method="get" action="form.php" name="test"></form>    <script>    var oForm = document.forms.test;    console.log(oForm.method);//get</script>

Character set

accept-charset 属性は、サーバーがどの文字セットを使用するかを指定します。通常は指定されないため、ページの文字エンコーディングが使用されます

送信アドレス

この属性が無視された場合、action 属性はフォームデータの送信先を指定します。フォームは、フォームが配置されている URL にリダイレクトされます

Open メソッド

Target プロパティは、アクション URL を開く場所を指定します。 _blank、_self、_parent、_top、framename の合計 5 つの値があります。

target 属性の使用はここに移動しました

データエンコーディング

enctype 属性は、フォームデータをサーバーに送信する前にエンコードする方法を指定します。ほとんどの場合、このプロパティを設定する必要はありません

Application/x-www-form-urlencoded 送信前にすべての文字をエンコードします (デフォルト)

Multipart/form-data 文字をエンコードしません。ファイルアップロードコントロールを含むフォームを使用する場合は、この値を使用する必要があります

text/plain スペースは「+」プラス記号に変換されますが、特殊文字はエンコードされません

データ送信

フォームは2つに分けてデータを送信できます方法: GET および POST、デフォルトは GET メソッドです。

POSTメソッド

POSTメソッドを使用した場合、ブラウザは次の2つの手順に従ってデータを送信します。まず、ブラウザは、action 属性で指定されたフォーム処理サーバーとの接続を確立し、接続が確立されると、セグメント化された送信方法でデータをサーバーに送信します。 サーバー側では、POST スタイルのアプリケーションが実行を開始すると、パラメーターはフラグの場所から読み取られる必要があり、パラメーターが読み取られたら、アプリケーションがこれらのフォーム値を使用する前に、これらのパラメーターをデコードする必要があります。ユーザー固有のサーバーは、アプリケーションがこれらのパラメーターを受け入れる方法を明示的に指定します。

【アプリケーションシナリオ】

[1] POSTメソッドがGETメソッドよりも多くのフィールドを処理するため、ビッグデータ処理

[2] 安全なデータ、GETメソッドはフォームパラメータをアプリケーションのURLに直接配置するため、ネットワーク スヌーパーは簡単にそれらをキャプチャし、サーバーのログ ファイルから抽出できます。POST メソッドにはこの脆弱性がありません

GET メソッド

GET メソッドが使用される場合、フォーム処理サーバーは接続を確立して送信します。すべてのフォーム データを 1 回の転送ステップで直接送信します。ブラウザはフォームのアクション URL の直後にデータを追加します。 2 つを区切るには疑問符を使用します。

【適用シナリオ】

[1] GET はいくつかの単純なフィールドのみを送信するため、最高のフォーム送信パフォーマンスが得られます

[2] GET メソッドはエンコードおよびデコードメソッドを扱う必要がないため、単純な処理

[3]パラメータ送信処理 GETメソッドによりフォームのパラメータをURLの一部として含めることができるため

<h3>get方法</h3><form method="get" action="form.php" target = "_blank">    <p><label>x:<input name="x"></label></p>    <p><label>y:<input name="y"></label></p>    <p><button type="submit">Submit</button></p></form>    <a title="form.php?x=28&y=66" href="form.php?x=28&amp;y=66">a标签传参</a><h3>post方法</h3><form method="post" action="form.php"  target = "_blank">    <p><label>x:<input name="x"></label></p>    <p><label>y:<input name="y"></label></p>    <p><button type="submit">Submit</button></p></form>    

//GET方法的URL显示为： http://127.0.0.1/form.php?x=1&y=2//POST方法的URL显示为：http://127.0.0.1/form.php<p><?phpif(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){    echo "x: " .$_REQUEST["x"] ."<br>";    echo "y: " .$_REQUEST["y"];}?>    </p>

Autocomplete

autocomplete属性はフォームでオートコンプリートを有効にするかどうかを指定します。ユーザーがフィールドに入力を開始すると、ブラウザーは以前に入力した値に基づいてフィールドに入力されたオプションを表示する必要があります

<form autocomplete="on | off">        该属性默认为on，当设置为off时，规定禁用自动完成功能<button id="btn1">打开自动完成</button><button id="btn2">关闭自动完成</button><form method="get" action="#" name="test">    <p><label>x:<input name="x"></label></p>    <p><label>y:<input name="y"></label></p>    <p><button type="submit">Submit</button></p>    </form>    <script>var oForm = document.forms.test;btn1.onclick = function(){    oForm.autocomplete = 'on';};btn2.onclick = function(){    oForm.autocomplete = 'off';};</script>

フォーム検証

novalidate 属性は、次の場合にフォームを検証しないことを指定します。提出されました