HTMLの<form>が1ページ内に複数あった場合にEnterを押すと……

業務効率化

友人から質問があり、回答したのですがちょっと不安になったので実証試験を行いました。

質問内容は、「Webページに複数の<form>があって、Enterで送信したいんだけど、どっちの<form>が送信されるの?」というものです。

悩見坂 楓
悩見坂 楓

あ、これ私も気になるかも

著者
著者

ちょっと自信無かったので実際にテストしてどっちの<form>が送信されるか検証しました

僕がした回答は「ユーザーが<input>で入力中だったり、入力エリアがアクティブな方の<form>が飛ぶよ」です。

検証

回答してから、あれホントにそうだったっけ?と引っかかってしまい、検証することに。

こちらに検証用のページを用意したので、気になる方は触ってみてください。
https://engineering.webstudio168.jp/sample/submitTest/

Form01に入力中にEnterを押すと、飛び先は
https://engineering.webstudio168.jp/sample/submitTest/?sample-01=testnyuuryoku#1
となりました。

Form02に入力してEnterを押すと、
https://engineering.webstudio168.jp/sample/submitTest/?sample-02=testnyuuryoku#2
となります。

<form>のactionをそれぞれ「#1」「#2」に、nameを「sample-01」「sample-02」にしてGETで送信しているので、
?sample-01=testnyuuryoku#1
?sample-02=testnyuuryoku#2
の部分を見れば、入力中の<form>で囲っている<input type=”submit”>が反応してくれていることが分かります。

まとめ

回答が間違ってなくて良かった……
複数ある<form>でEnterを押すと、入力中でアクティブな方が送信されます。

悩見坂 楓
悩見坂 楓

あ、なるほどね。入力中の<form>がsubmitされるってことか。スッキリ!

ChromeでもIEでもそうなったので、たぶん全ブラウザそうだと思われます。(Firefoxは見てません)

タイトルとURLをコピーしました