HTMLのみで対応する、エンターキーによるsubmitの実行を防ぐ方法

仕事で会員制のECサイトを作ったのだが、新規会員登録フォームでの入力中にエンターキーを押すとFormのsubmitが実行される仕様に対し指摘があった。

ログイン画面などの場合、エンターキーでFormの内容を送信できるのは便利な仕様ではあるのだが、新規会員登録画面や、会員情報編集画面などでこの仕様を採ると、ユーザーの予期せぬ送信が頻発してしまいかねないのであまり好ましくない。

そのためFormの送信を、ボタンクリック時のみ行われるよう仕様変更をすることとなった。

元のHTMLがこちらのコード。

<form action="./confirm/" method="post"> 
  <input type="text" name="name">

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

buttonタグのtype属性にsubmitを指定しており、このコードだとinput要素への入力中にエンターキーを押すと入力途中でsubmitが実行される。

改変後のコードがこちら。

<form action="./confirm/" method="post"> 
  <input type="text" name="name">

  <button type="button" onclick="submit();">送信</button>
</form>

buttonタグのtype属性をbuttonに変更し、ボタンクリック時にFormを送信させるためにonclick="submit();"を追加している。

これでエンターキーによる誤送信を防ぐことができる。