[解決済み】HTMLフォームのデフォルトの送信ボタンはどのように決定されるのでしょうか?
質問
フォームが送信されたが、特定のボタンによって送信されていない場合、例えば
- を押すことで 入力
-
使用
HTMLFormElement.submit()
JSで
ブラウザは、複数の送信ボタンのうち、どれが押されたものとして使用するかをどのように判断するのでしょうか?
これは2つの点で意義がある。
-
を呼び出すと
onclick
サブミットボタンに付けられたイベントハンドラ - ウェブサーバーに送り返されるデータ
今までの実験でわかったこと。
- を押すと 入力 Firefox、Opera、Safari は、フォームの最初の送信ボタンを使用します。
- を押すと 入力 IEは、私が解明できていない条件によって、最初の送信ボタンを使用するか、まったく使用しないかを決定します。
- これらのブラウザは、JS送信のために全く何も使用しません。
規格ではどうなっているのですか?
もしお役に立てればと思い、私のテストコードをご紹介します(PHPは私のテスト方法にのみ関係し、私の質問自体には関係しません)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>
<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>
<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<input type="text" name="method" />
<input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
<input type="text" name="stuff" />
<input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
<input type="button" value="submit" onclick="document.theForm.submit();" />
</form>
</body></html>
解決方法は?
JavaScriptでフォームを送信した場合(つまり。
formElement.submit()
またはそれに相当するもの)、その場合
なし
の送信ボタンは成功したとみなされ、その値は送信データに含まれません。 (ただし、フォームの送信に
submitElement.click()
しかし、最初の部分を読んで、JavaScriptのフォーム送信で送信ボタンを成功させるにはどうしたらよいかと考えている人のために、このことを書いておこうと思いました。 もちろん、フォームのonsubmitハンドラはこの方法でも発生します。
form.submit()
ということで、これはまた別の話ですが......)
テキストエリアでないフィールドでEnterキーを押してフォームを送信した場合、ここで何を望むかは、実際にはユーザーエージェントの判断に委ねられることになります。 仕様 を使用してフォームを送信することについては何も書いてありません。 入力する キーでテキスト入力フィールドに移動します(タブでボタンに移動し、スペースなどでボタンを有効にすれば、その特定の送信ボタンが明確に使用されるため、問題はありません)。 送信ボタンがアクティブになったときにフォームを送信しなければならない、というだけのことです。を打つことが必要なわけでもありません。 入力 を入力すると、フォームが送信されます。
Internet Explorerはソースに最初に表示される送信ボタンを選択すると思います。FirefoxとOperaは最も低いtabindexを持つボタンを選択し、他に何も定義されていない場合は最初に定義されたものにフォールバックするような気がしています。 また、サブミットにデフォルト以外の値属性があるかどうかに関しても、ややこしい問題がありますIRC。
ここで重要なのは、ここで何が起こるかについて定義された基準はなく、完全にブラウザの気まぐれだということです。したがって、何をするにしても、できるだけ特定の動作に依存しないようにしましょう。 どうしても知りたいのであれば、様々なブラウザのバージョンの挙動を調べることができるでしょうが、私がしばらく前に調べたときには、かなり複雑な条件(もちろん、新しいブラウザのバージョンで変更される可能性があります)がありましたので、可能であれば避けることをお勧めしますよ。
関連
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み] HTMLフォームに複数の送信ボタンがある場合、1つのボタンをデフォルトとして指定する [重複] 。