データを送信するためのHTMLの入力送信、ボタン、エンターキーの詳細説明

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

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

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

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

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

<input name=&#39;btn&#39; value=&#39;提交&#39; type=&#39;submit&#39;>

送信後の URL は localhost:3980/input.html?name=222222&btn=Submit

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

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

2.

button[tpe=submit]ボタンのセマンティクスは非常に明確です。つまり、ボタンにはデータが含まれず、その機能はユーザーとの対話です。ただし、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>

上記はこの章の内容全体です。関連するチュートリアルについては、# を参照してください。 ## HTML ビデオ チュートリアル

!

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