タイトル: buttonでformをsubmitさせない方法
SEOタイトル: button で form を submit させない方法 完全ガイド（type="button" / preventDefault / Enter キー / フォーム外 / アクセシビリティ）
| この記事の要点 |
|
結論: type="button" を明示する
<form> の内側にある <button> は、type を省略すると submit 扱いになります。クリックや Enter キーで意図せずフォームが送信され、ページがリロードされたり API が叩かれたりします。これを防ぐ最も簡単な方法は、ボタン側に type="button" を書くことです。
<form action="/save" method="post">
<input type="text" name="title">
<!-- 送信しない補助ボタン -->
<button type="button" onclick="addRow()">行を追加</button>
<!-- 送信ボタン -->
<button type="submit">保存</button>
</form>button 要素の type 一覧
| type | 動作 |
|---|---|
submit（既定） | 所属する form を送信 |
button | 何もしない（JS から制御） |
reset | form を初期値に戻す |
JavaScript で止める
既存コードで type を書き換えられない、または条件によって送信したいときは preventDefault() を使います。
// クリック時に止める
document.querySelector('#myBtn').addEventListener('click', e => {
e.preventDefault(); // submit 動作キャンセル
// ここで自前処理
doSomething();
});
// onclick 属性内なら return false でも止まる（古典）
// <button onclick="doSomething(); return false;">押す</button>Enter キー暗黙送信を止める
type="button" でも、フォーム内のテキスト入力でEnter キーを押すと、フォーム内で最初に見つかった type="submit" ボタン（もしくはデフォルト挙動）で送信されます。送信を全面禁止したい場合は、form の submit イベント自体を止めます。
const form = document.querySelector('#searchForm');
form.addEventListener('submit', e => {
e.preventDefault(); // どんな経路でも送信させない
// ここで Ajax / 自前処理
fetchResults(form.elements.q.value);
});あるいはテキスト入力の Enter キーを個別に止める方法もあります。
input.addEventListener('keydown', e => {
if (e.key === 'Enter') {
e.preventDefault();
}
});form の外にボタンを出す / 関連付け替え
レイアウト上どうしても form の中に置きたいが、送信対象にしたくないケースでは、HTML5 の form 属性で所属を切り替えることもできます。
<!-- 別 form と関連付け -->
<form id="formA" action="/a"></form>
<form id="formB" action="/b"></form>
<!-- 物理的には formA の中だが、押すと formB が送信される -->
<form id="formA">
<input name="x">
<button type="submit" form="formB">B を送る</button>
</form>2 つ以上の送信ボタンを使い分ける
「下書き保存」「公開」のように同じ form で複数の送信先を持ちたいときは、formaction / formmethod 属性で個別に上書きできます。
<form action="/save" method="post">
<input name="title">
<button type="submit">保存</button>
<button type="submit" formaction="/publish">公開</button>
<button type="button" onclick="preview()">プレビュー</button>
</form>アクセシビリティ上の補足
「クリックできる装飾」を作りたいときに <div onclick> や <span> を使うのは避け、<button type="button"> を選んでください。Tab フォーカス、Space / Enter での起動、スクリーンリーダの「ボタン」アナウンスがすべて標準で備わります。CSS で見た目を調整すればよいだけです。