ディレクトリ [1] フォーム名 [2] 文字セット [3] 送信アドレス [4] 開封方法 [5] データエンコーディング [6] データ送信 [7] オートコンプリート [8] フォーム検証 前の単語 フォームは、Web ページとユーザー間の対話ツールであり、コンテナとしての 要素と、 要素で使用できるその他のタグで構成されます。フォームには、、、、<fieldset>、<legend>、<label> およびその他のフォーム制御要素を含めることができます </p> <p> [注] フォーム内でフォームをネストすることはできません </p> <p> </p> <p>form 要素 </p> <h2> form 要素には、accept-charset、action、autocomplete、enctype、method、name、novalidate、target の合計 8 つの属性があります。 </h2> <p>Form name </p> <h3> 属性は必須です。 name 属性は、フォーム名を指定します。 name= "test" の場合、JavaScript は document.forms.test を使用してフォームを取得できます </h3> <p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><form method="get" action="form.php" name="test"></form> <script> var oForm = document.forms.test; console.log(oForm.method);//get</script></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> </p> <p>Character set</p> <h3> accept-charset 属性は、サーバーがどの文字セットを使用するかを指定します。通常は指定されないため、ページの文字エンコーディングが使用されます </h3> <p> </p> <p> 送信アドレス </p> <h3> この属性が無視された場合、action 属性はフォームデータの送信先を指定します。フォームは、フォームが配置されている URL にリダイレクトされます </h3> <p> </p> <p> Open メソッド </p> <h3> Target プロパティは、アクション URL を開く場所を指定します。 _blank、_self、_parent、_top、framename の合計 5 つの値があります。 </h3> <p> target 属性の使用はここに移動しました</p> <p> </p> <p>データエンコーディング</p> <h3> enctype 属性は、フォームデータをサーバーに送信する前にエンコードする方法を指定します。ほとんどの場合、このプロパティを設定する必要はありません </h3> <p> Application/x-www-form-urlencoded 送信前にすべての文字をエンコードします (デフォルト) </p> Multipart/form-data 文字をエンコードしません。ファイルアップロードコントロールを含むフォームを使用する場合は、この値を使用する必要があります<p> </p> text/plain スペースは「+」プラス記号に変換されますが、特殊文字はエンコードされません<p> </p> <p> </p>データ送信<p> </p> フォームは2つに分けてデータを送信できます方法: GET および POST、デフォルトは GET メソッドです。 <h3> </h3><p>POSTメソッド</p><p> POSTメソッドを使用した場合、ブラウザは次の2つの手順に従ってデータを送信します。まず、ブラウザは、action 属性で指定されたフォーム処理サーバーとの接続を確立し、接続が確立されると、セグメント化された送信方法でデータをサーバーに送信します。 <strong> </strong> サーバー側では、POST スタイルのアプリケーションが実行を開始すると、パラメーターはフラグの場所から読み取られる必要があり、パラメーターが読み取られたら、アプリケーションがこれらのフォーム値を使用する前に、これらのパラメーターをデコードする必要があります。ユーザー固有のサーバーは、アプリケーションがこれらのパラメーターを受け入れる方法を明示的に指定します。 <br /> </p>【アプリケーションシナリオ】<p> </p> [1] POSTメソッドがGETメソッドよりも多くのフィールドを処理するため、ビッグデータ処理<p> </p> [2] 安全なデータ、GETメソッドはフォームパラメータをアプリケーションのURLに直接配置するため、ネットワーク スヌーパーは簡単にそれらをキャプチャし、サーバーのログ ファイルから抽出できます。POST メソッドにはこの脆弱性がありません<p> </p><p>GET メソッド</p> <p> <strong> GET メソッドが使用される場合、フォーム処理サーバーは接続を確立して送信します。すべてのフォーム データを 1 回の転送ステップで直接送信します。ブラウザはフォームのアクション URL の直後にデータを追加します。 2 つを区切るには疑問符を使用します。 </strong> </p>【適用シナリオ】<p> </p> [1] GET はいくつかの単純なフィールドのみを送信するため、最高のフォーム送信パフォーマンスが得られます<p> </p> [2] GET メソッドはエンコードおよびデコードメソッドを扱う必要がないため、単純な処理<p> </p> [3]パラメータ送信処理 GETメソッドによりフォームのパラメータをURLの一部として含めることができるため <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><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&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> </pre><div class="contentsignin">ログイン後にコピー</div></div> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">//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></pre><div class="contentsignin">ログイン後にコピー</div></div> <p class="sycode"> </p> <p class="sycode"> </p>Autocomplete<p> </p> autocomplete属性はフォームでオートコンプリートを有効にするかどうかを指定します。ユーザーがフィールドに入力を開始すると、ブラウザーは以前に入力した値に基づいてフィールドに入力されたオプションを表示する必要があります <h3> </h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><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></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p> </p> <p class="sycode"> </p> <p> </p>フォーム検証 <p> </p> novalidate 属性は、次の場合にフォームを検証しないことを指定します。提出されました<h3> </h3>
