2019-08-23に投稿

form inputタグでsubmitボタンが無いとEnterしても送信されない現象の原因

現象

image.png

  • HTMLで入力フォームを作成する際、<input type="submit">(送信ボタン)を使わずに記述したところ、Enterを押してもページが遷移せず、送信されなかった。
  • <input type="submit">のスタイルにdisplay:noneを設定したところ、Chromeでは送信できるようになったがSafariでは送信できないままだった。

該当のコード

<form accept-charset="UTF-8" method="post" action="">
<input name="name">
<input name="name2">
</form>

実際の動作は用意したこちらのページで確認してほしい。「項目が複数でsubmitなし」の部分です。

原因

仕様でした。

WHATWGの仕様書を見てみます。
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

4.10.21 Form submission(以下和訳)

4.10.21.2 暗黙的送信

form要素のデフォルトボタンは、そのform要素に登場する最初のsubmitボタンです。

もしブラウザがユーザーの暗黙的送信(例えば、いくつかのプラットフォームではテキスト項目でEnterキーを押すとフォームが送信される)をサポートするのであれば、そのデフォルトボタンが有効であるフォームに対して、デフォルトボタンでclickイベントが発火したように振舞わなければいけません。

注:暗黙的送信しか使えないような(submitボタンの無い)ページがWebにはあるので、ブラウザはこれをサポートすることを強く推奨します。

フォームにsubmitボタンがない場合、そのフォームが複数の 暗黙的送信を妨げるフィールド を持つならば、暗黙的送信メカニズムは何もしてはいけません。そうでないならば、form要素はフォームの内容を送信しなければなりません。

form要素を親に持つinput要素で、属性が以下のどれかであれば、それはform要素の暗黙的送信を妨げるフィールドです。 Text, Search, URL, Telephone, E-mail, Password, Date, Month, Week, Time, Local Date and Time, Number

暗黙的送信(Implicit submission)とは、text属性などのinput要素の中でEnterを押すと送信できるように、submitボタンを押さなくても送信できる補助機能のことを指します。

ざっくり言うと、フォームが複数のinput要素を持っている場合、submitボタンが無い限り暗黙的送信は行ってはならないと定義されているのです。

逆に言えば、submitボタンは無いがフォームのinput要素が1つだけの場合や、フォームのinput要素が複数あるが有効なsubmitボタンが存在する場合は、暗黙的送信ができるということです。

対策

もしあなたが複数のinput要素を送信しようとしているのなら、できる限りsubmitボタンを用意すべきでしょう。submitボタンの書き方は2通りあります。

input要素を使う場合

<input type="submit">

value属性でボタンに表示されるテキストを編集できます。デフォルトでは「送信」が表示されます。

button要素を使う場合

<button type="submit">送信</button>

input要素と異なり、ボタンの中身はHTMLで記述できます。

それでもsubmitボタンを表示したくない場合は、次のようにCSSで消すのが良いでしょう。

<button type="submit" style="padding:0;border:0"></button>

以上

ツイッターでシェア
みんなに共有、忘れないようにメモ

ウラル

Splatoonの二次創作サイト「スプランプ」の管理人です。サーモンラン研究所やオクトチャット、フェス速報などを作りました。

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント