Written by Kasumi

form(フォーム)タグでエンターキー送信を無効にする方法

お問い合わせ・見積フォームで、テキストボックス内に文字を入れてエンターキーを押すと勝手に送信処理されてしまう。

エンターキーで送信されるのを無効にしたい。

このような悩みを解決します。

本記事では、formタグ内のhtmlを編集してエンターキーで送信される処理を無効化する方法について解説致します。

送信ボタンのtype属性でsubmitを使わない

<form action="">
  <input type="text">
  <input type="text">
  <button type="button" onclick="submit();" value="送信"></button>
</form>

送信ボタンのhtmlタグのtype属性にsubmitを使っていませんか?

こちらをbuttonに変える事でエンターキーを押しても送信されなくなります。

テキストボックスを増やす

<input type="text" name="dummy" style="display:none;">

フォーム内にテキストボックスが一つしか無かった場合、前章でtype属性をbuttonに変えても送信処理されてしまいます。

その場合はダミーでtextボックスを増やしましょう。

style属性でdisplay: none;を指定してやれば、サイトの見た目上表示されなくなります。

以上で完了です。

まとめ

必須項目を入れないとエラーで送信できないフォームなどはテキストボックスの位置などで問題ないかもしれませんが、特にない場合は本記事の内容が役立つかと思います。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

WordPressでブログを始めた方必見!おすすめのプラグインを紹介します

2020.07.22
103
HTMLCSS プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
279
プログラミング

htaccessを使ってhttpからhttpsへリダイレクトさせる方法

2022.04.15
104
HTMLCSS

CSSでテキストを大文字・小文字に自動変換する方法

2022.08.04
253