buttonとsubmitの違いを徹底解説！混乱を生む理由と使い分けのコツ

---

buttonとsubmitの基本的な違いを知ろう

buttonとsubmitの違いを正しく理解するには、まずHTMLの基本を押さえる必要があります。ボタンには大きく分けて二つの役割があり、一つはユーザーが画面上の操作を実行するための「実行ボタン」、もう一つはフォームをサーバーへ送信する「送信ボタン」です。buttonタグは中のテキストやHTML要素を自由に組み合わせて一つのボタンにできるため、アイコンを左に付けたり、複数の要素を並べて一つのボタンにすることができます。
ただし、buttonには「ボタンの挙動をどう設定するか」という点が重要で、type属性が未指定の場合のデフォルト挙動が送信になることもあるため、意図しない送信を避けるにはtype='button'を使うのが安全です。これに対して、input type='submit'は名前のとおり「送信することを目的とした入力要素」で、見た目は白い長方形のボタンとして表示され、内部の表示はvalue属性の文字列だけでデザインを変えにくいという特徴があります。
この点が、デザインと挙動での大きな違いです。

この二つの要素を混同すると、フォームの挙動がうまくいかなくなることがあります。例えば、ボタンの見た目をデザインしたいのに、送信機能だけを確実に持たせたい場合、それぞれの特性を活かすことが重要です。buttonを使うと、テキストだけでなくアイコンや画像を混在させることが可能で、アクセシビリティを高めるためのaria-labelを追加したり、キーボード操作の挙動を細かく制御したりできます。
一方で、input type='submit'は標準的で広くサポートされ、スタイルのデザインを大きく崩さずに済む場合も多いです。したがって、まずは機能要件を決めてから、見た目の要件と使い分けのルールを決めるのが良いでしょう。

使い分けのコツと実践例

使い分けのコツは「目的と表示の自由度」を分けて理解することです。まずはフォームを作る人の意図をはっきりさせ、送信が本当に必要か、あるいはデータの準備だけを行いたいのかを決めます。buttonは中身を自由に組み合わせられるので、アイコン付きのボタンや「次へ」「キャンセル」「ヘルプ」といった複数のアクションを一つの視覚要素に集約したいときに向いています。
反対に、input type='submit'は機能が明確で、テキストだけを表示して送信機能を提供します。デザインを最小限に保ちつつ、送信の挙動を崩したくないときにはこの組み合わせが安全です。

実践的な例として、検索フォームを考えてみましょう。検索ボタンは入力の最適解としてsubmitで十分な場合が多いですが、検索条件を変更する「リセット」ボタンを同じフォームに置く場合には button type='button' のように別のボタンを用意します。下の表は実際の使い方の違いを簡単に比較したもの。

ble>要素用途例button (type='submit')送信機能を必ず持つ<button type='submit'>検索へ</button>button (type='button')送信せず、スクリプトで処理<button type='button'>次へ</button>input type='submit'値を表示して送信<input type='submit' value='検索' />input type='button'送信なしのボタン<input type='button' value='設定' />

このように使い分けると、フォームが想定どおりに動き、デザインと機能の両方を満たせます。アクセシビリティの配慮としては、ラベルだけでなく aria-label の設定や、キーボード操作の順序を考えることも大切です。最後に、実際のページではコードの可読性と保守性を両立するために、同じ用途のボタンは一つの規則に沿って命名・実装するのがおすすめです。

ピックアップ解説

友だちと学校の制作の話をしていて、ボタンの話題になりました。buttonとsubmitの違いをどう伝えるか、とても迷ったけど、結局“ボタンは中身次第で動きが変わる”という結論に落ち着きました。buttonは中にHTMLを入れられるので、一つの部品で複数の情報を伝えられる。対してsubmitは送信することを約束した要素。つまるところ、UIの美しさと機能の確実さのバランスをどう取るかが大事だ、という結論です。たとえば、論文の表紙のようにボタンのデザインを整えたい時はbuttonを使い、動作は別々のJavaScriptで制御すれば良い。逆に、送信が最優先で、クリックしたら必ずデータを送る必要がある場合はinputタイプの送信ボタンを使うのが安全です。こんなふうに、使い分けの感覚を養うことが、初心者がいきなり美しいフォームを作る近道になります。

---