ホームページ >ウェブフロントエンド >jsチュートリアル >入力送信・ボタン・エンターキー送信データの詳細説明

入力送信・ボタン・エンターキー送信データの詳細説明

高洛峰
高洛峰オリジナル
2017-01-11 11:41:401520ブラウズ

<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 初期の粗雑なデザインに由来する入力コントロールを改造したボタンです。これを確認するには、名前を設定します:

adc21d87c94616031bb57e8300068cfd

送信後の 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>

入力送信、ボタン、入力キーの送信データ関連の記事の詳細については、 PHPの中国語サイトです!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。