1. ホーム
  2. ジャバスクリプト

[解決済み】HTMLフォームのデフォルトの送信ボタンはどのように決定されるのでしょうか?

2022-04-05 09:48:30

質問

フォームが送信されたが、特定のボタンによって送信されていない場合、例えば

  • を押すことで 入力
  • 使用 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。

ここで重要なのは、ここで何が起こるかについて定義された基準はなく、完全にブラウザの気まぐれだということです。したがって、何をするにしても、できるだけ特定の動作に依存しないようにしましょう。 どうしても知りたいのであれば、様々なブラウザのバージョンの挙動を調べることができるでしょうが、私がしばらく前に調べたときには、かなり複雑な条件(もちろん、新しいブラウザのバージョンで変更される可能性があります)がありましたので、可能であれば避けることをお勧めしますよ。