データを送信するための入力、送信、ボタンとエンターキーの違いの分析例

この記事では、入力、送信、ボタン、およびデータを送信するための Enter キーの違いを分析するために最近、多くのフォーム送信がプロジェクトで使用されていることがわかりました。 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 初期の粗雑なデザインに由来する入力コントロールを改造したボタンです。これを確認するには、名前を設定します:

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

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

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

2. ボタン [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 を受け入れる必要があります。

フィールドが 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

で入力形式を制御する方法の例

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