過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong><form> の中に置いた <button> の既定 type は <code>submit</code></strong>。何もしないボタンには必ず <strong><code>type="button"</code></strong> を指定する</li><li>JavaScript 側で止めるなら <strong><code>event.preventDefault()</code></strong> をクリックハンドラ先頭で呼ぶ</li><li>Enter キーでの暗黙送信を防ぐなら <strong>form 全体の <code>submit</code> イベント</strong>を <code>preventDefault</code></li><li>ボタンを<strong>form の外</strong>に置く、または <code>form="別 form の id"</code> で関連先を切り替える方法もある</li><li>アクセシビリティ: 単なる装飾なら <code><div></code> ではなく <code><button type="button"></code>。キーボード操作とフォーカスが標準でついてくる</li></ul></td></tr></table>
<h2>結論: type="button" を明示する</h2>

<p><code><form></code> の内側にある <code><button></code> は、<strong>type を省略すると <code>submit</code> 扱い</strong>になります。クリックや Enter キーで意図せずフォームが送信され、ページがリロードされたり API が叩かれたりします。これを防ぐ最も簡単な方法は、ボタン側に <code>type="button"</code> を書くことです。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><form action="/save" method="post">
  <input type="text" name="title">

  <!-- 送信しない補助ボタン -->
  <button type="button" onclick="addRow()">行を追加</button>

  <!-- 送信ボタン -->
  <button type="submit">保存</button>
</form></code></pre>
<h2>button 要素の type 一覧</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>type</th><th>動作</th></tr></thead>
<tbody>
<tr><td><code>submit</code>（既定）</td><td>所属する form を送信</td></tr>
<tr><td><code>button</code></td><td>何もしない（JS から制御）</td></tr>
<tr><td><code>reset</code></td><td>form を初期値に戻す</td></tr>
</tbody>
</table>

<h2>JavaScript で止める</h2>

<p>既存コードで type を書き換えられない、または条件によって送信したいときは <code>preventDefault()</code> を使います。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// クリック時に止める
document.querySelector(&apos;#myBtn&apos;).addEventListener(&apos;click&apos;, e => {
  e.preventDefault();    // submit 動作キャンセル
  // ここで自前処理
  doSomething();
});

// onclick 属性内なら return false でも止まる（古典）
// <button onclick="doSomething(); return false;">押す</button></code></pre>
<h2>Enter キー暗黙送信を止める</h2>

<p><code>type="button"</code> でも、フォーム内のテキスト入力で<strong>Enter キー</strong>を押すと、フォーム内で最初に見つかった <code>type="submit"</code> ボタン（もしくはデフォルト挙動）で送信されます。送信を全面禁止したい場合は、form の <code>submit</code> イベント自体を止めます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">const form = document.querySelector(&apos;#searchForm&apos;);
form.addEventListener(&apos;submit&apos;, e => {
  e.preventDefault();      // どんな経路でも送信させない
  // ここで Ajax / 自前処理
  fetchResults(form.elements.q.value);
});</code></pre>
<p>あるいはテキスト入力の Enter キーを個別に止める方法もあります。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">input.addEventListener(&apos;keydown&apos;, e => {
  if (e.key === &apos;Enter&apos;) {
    e.preventDefault();
  }
});</code></pre>
<h2>form の外にボタンを出す / 関連付け替え</h2>

<p>レイアウト上どうしても form の中に置きたいが、送信対象にしたくないケースでは、HTML5 の <code>form</code> 属性で<strong>所属を切り替える</strong>こともできます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 別 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></code></pre>
<h2>2 つ以上の送信ボタンを使い分ける</h2>

<p>「下書き保存」「公開」のように<strong>同じ form で複数の送信先</strong>を持ちたいときは、<code>formaction</code> / <code>formmethod</code> 属性で個別に上書きできます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<h2>アクセシビリティ上の補足</h2>

<p>「クリックできる装飾」を作りたいときに <code><div onclick></code> や <code><span></code> を使うのは避け、<code><button type="button"></code> を選んでください。Tab フォーカス、Space / Enter での起動、スクリーンリーダの「ボタン」アナウンスがすべて標準で備わります。CSS で見た目を調整すればよいだけです。</p>

<h2>関連</h2>

<ul>
<li><a href="/article/10325">HTML</a> &mdash; マークアップ言語</li>
<li><a href="/article/20604">input要素</a> &mdash; 同じくフォーム部品</li>
<li>button要素 &mdash; 本記事の対象</li>
<li>form要素 &mdash; 親フォーム</li>
<li>preventDefault &mdash; ブラウザ既定動作の抑止</li>
</ul>