過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のため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=&quot;button&quot;</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=&quot;別 form の id&quot;</code> で関連先を切り替える方法もある</li><li>アクセシビリティ: 単なる装飾なら <code>&lt;div&gt;</code> ではなく <code>&lt;button type=&quot;button&quot;&gt;</code>。キーボード操作とフォーカスが標準でついてくる</li></ul></td></tr></table>
<h2>結論: type="button" を明示する</h2>

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

  &lt;!-- 送信しない補助ボタン --&gt;
  &lt;button type=&quot;button&quot; onclick=&quot;addRow()&quot;&gt;行を追加&lt;/button&gt;

  &lt;!-- 送信ボタン --&gt;
  &lt;button type=&quot;submit&quot;&gt;保存&lt;/button&gt;
&lt;/form&gt;</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 =&gt; {
  e.preventDefault();    // submit 動作キャンセル
  // ここで自前処理
  doSomething();
});

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

<p><code>type=&quot;button&quot;</code> でも、フォーム内のテキスト入力で<strong>Enter キー</strong>を押すと、フォーム内で最初に見つかった <code>type=&quot;submit&quot;</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 =&gt; {
  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 =&gt; {
  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">&lt;!-- 別 form と関連付け --&gt;
&lt;form id=&quot;formA&quot; action=&quot;/a&quot;&gt;&lt;/form&gt;
&lt;form id=&quot;formB&quot; action=&quot;/b&quot;&gt;&lt;/form&gt;

&lt;!-- 物理的には formA の中だが、押すと formB が送信される --&gt;
&lt;form id=&quot;formA&quot;&gt;
  &lt;input name=&quot;x&quot;&gt;
  &lt;button type=&quot;submit&quot; form=&quot;formB&quot;&gt;B を送る&lt;/button&gt;
&lt;/form&gt;</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">&lt;form action=&quot;/save&quot; method=&quot;post&quot;&gt;
  &lt;input name=&quot;title&quot;&gt;

  &lt;button type=&quot;submit&quot;&gt;保存&lt;/button&gt;
  &lt;button type=&quot;submit&quot; formaction=&quot;/publish&quot;&gt;公開&lt;/button&gt;
  &lt;button type=&quot;button&quot; onclick=&quot;preview()&quot;&gt;プレビュー&lt;/button&gt;
&lt;/form&gt;</code></pre>
<h2>アクセシビリティ上の補足</h2>

<p>「クリックできる装飾」を作りたいときに <code>&lt;div onclick&gt;</code> や <code>&lt;span&gt;</code> を使うのは避け、<code>&lt;button type=&quot;button&quot;&gt;</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>