データを送信するための入力送信、ボタン、および Enter キーの違いを分析する-htmlチュートリアル-php.cn

データを送信するための入力送信、ボタン、および Enter キーの違いを分析する

巴扎黑

リリース： 2017-08-11 13:54:21

オリジナル

2226 人が閲覧しました

最近のプロジェクトでは多くのフォーム送信が使用されており、入力、ボタン、送信、さらには Enter キーでさえフォーム送信をトリガーできることがわかりました。以下に、それらの使用法の違いについて説明します。

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

ログイン後にコピー

この方法で送信すると、入力値が 22222222 の場合、後で送信される URL は localhost:3980/input.html?name=222222 になります
いくつかの注目すべき詳細があります:

送信後、type= を設定します。入力コントロールはボタンに変わり、表示されるテキストがその値になります。デフォルト値は「送信」です。
form[method] のデフォルト値は GET なので、送信後は GET メソッドを使用してページにジャンプします。
input[type] のデフォルト値は text であるため、最初の入力はテキストボックスとして表示されます。

Input は実際には、Web 初期の粗雑なデザインに由来する入力コントロールを改造したボタンです。これを確認するには、名前を設定します:

<input name='btn' value='Submit' type='submit'><input name='btn' value='提交' type='submit'>

提交后的Url就会变为localhost:3980/input.html?name=222222&btn=提交

注意其中的URL为/?key=foo&btn=ok。作为按钮的input控件同时被当做一个表单输入提交给了服务器。它到底是交互控件还是数据控件呢？定位是有些不清晰。再加上它的样式难以定制、不可作为其他标签的容器，所以建议不要用input作为表单提交按钮。

注意：input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。

2、button[tpe=submit]

送信後の URL は次のようになります。 localhost:3980/input.html?name=222222&btn=Submit に変更します

URL は /?key=foo&btn=ok であることに注意してください。ボタンとしての入力コントロールも、フォーム入力としてサーバーに送信されます。それは対話型コントロールですか、それともデータコントロールですか?位置関係が少しわかりにくいです。さらに、そのスタイルはカスタマイズが難しく、他のタグのコンテナとして使用できないため、input をフォーム送信ボタンとして使用しないことをお勧めします。

注: input の type 属性は button にすることもできます。現時点では、これは単なるボタンであり、フォームの送信はトリガーされません。

2. button[tpe=submit]button のセマンティクスは非常に明確です。つまり、ボタンにはデータが含まれず、その機能はユーザーとの対話です。ただし、type 属性と value 属性もあります。 type のデフォルト値は submit なので、ボタンをクリックするとフォームが送信されます:

<form>
 <input name=&#39;key&#39;>
 <button>确定</button>
</form>

ログイン後にコピー

IE ブラウザとの互換性を実現している場合は、IE の button[type] のデフォルト値が button であることを覚えておいてください。 , これは、単なるボタンであり、フォームの送信をトリガーしないことを意味します。

さらに、要素の内容を設定することでボタンのテキストを指定します。これは、ボタンがコンテナコントロールであり、任意の HTML タグを含めることができ、スタイルのカスタマイズが容易であることを意味します。これが、Bootstrap ドキュメントで例としてボタンが広く使用されている理由の 1 つです。

ただ、ボタンが汚くなります。ボタンには名前と値を設定できます。フォームが送信されると、値はフォームデータとしてサーバーに送信されます。 IE では、ボタンの開始タグと終了タグの間のコンテンツも、名前に対応する値としてサーバーに送信されます。ボタンと入力の類似点はそれだけではありません。ボタンをクリックするとフォームがリセットされます (これは非常に便利です)。 w3school は次の例を示しています:

<form action="form_action.asp" method="get">
 First name: <input type="text" name="fname" />
 Last name: <input type="text" name="lname" />
 <button type="submit" value="Submit">Submit</button>
 <button type="reset" value="Reset">Reset</button>
</form>

ログイン後にコピー

ボタンについては多くは言いませんが、フォームを送信するにはインタラクティブなボタンとしてボタンを使用することをお勧めします。 IE と互換性を持たせるために、type=submit の設定にも注意してください。

Enter キーを押してフォームを送信してください

Enter キーを押してフォームを送信できます。ただし、すべてのフォームが Enter キーで送信できるわけではないことに気づいたかもしれません。 HTML2.0 標準を見てみましょう:

フォームに単一行のテキスト入力フィールドが 1 つしかない場合、ユーザーエージェントは、単一行を使用するときにそのフィールドへの Enter をリクエストとして受け入れる必要があります。テキスト入力コントロールでは、ユーザーエージェントは Enter キーを受け入れてフォームを送信する必要があります。

「単一行」とは、タイプがテキストエリアではなくテキストであることを指します。明らかに、テキストエリアでフォームを送信するために Enter キーを押すことは受け入れられません。実際、実際には、ログインページなど、Enter キーを使用して複数の単一行入力を送信することもできます。

4. フォーム送信の防止

フォーム送信の防止も一般的なトピックであり、通常はクライアント側のフォーム検証に使用されます。一般的な方法は、onsubmit を設定することです:

🎜🎜

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

ログイン後にコピー

🎜 一連の onsubmit ステートメントの最後に false を返すだけで、送信を阻止できます。コミットをブロックするかどうかを決定するためにメソッドを呼び出したい場合は、ここでメソッドの戻り値を忘れずに返してください: 🎜🎜🎜🎜

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

ログイン後にコピー

以上がデータを送信するための入力送信、ボタン、および Enter キーの違いを分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。