【HTML】buttonタグとは？type属性とsubmit・reset・buttonの違いを初心者向けに解説

HTMLのフォームでは、最後に「送信する」「リセットする」「次へ進む」のようなボタンを置くことがよくあります。このときに使う代表的なタグが button タグです。

ただ、buttonタグは見た目だけで理解すると少し危険です。フォームの中では、type 属性によって押した後の動きが変わるため、何も考えずに書くと思わぬ送信が起きることがあります。結論からいうと、buttonタグはボタンを作るタグで、type属性によって送信・リセット・通常ボタンの役割を分けます。

buttonタグを書くと画面ではこう見える
結論：buttonタグはクリックできるボタンを作るタグ
buttonタグの基本的な書き方
type属性の3種類を整理する
formタグと一緒に使うbuttonタグの例
input type submitとの違い
buttonタグでよくあるミス
まとめ

buttonタグを書くと画面ではこう見える

buttonタグを理解するときは、最初に「コード」と「画面で見えるボタン」を対応させるのが近道です。左側がHTMLに書くコード、右側がブラウザで表示したときのボタンです。

この画像で見てほしいのは、画面上ではどれも「押せるボタン」に見える一方で、左側の type の値によって役割が変わる点です。submit はフォーム送信、reset は入力内容のリセット、button はそれ自体では送信しない通常ボタンとして扱います。

フォーム内のbuttonは、迷ったらまず type を書く。これだけで事故がかなり減ります。

結論：buttonタグはクリックできるボタンを作るタグ

button タグは、クリックできるボタンをHTML上に作るためのタグです。フォーム送信ボタンとして使うこともできますし、JavaScriptと組み合わせて画面を切り替えたり、メニューを開いたりするためにも使えます。

<button type="submit">: フォームを送信する
<button type="reset">: フォームの入力内容を初期状態に戻す
<button type="button">: 送信せず、JavaScriptなどで動きを付ける

特にフォーム内で「送信しないボタン」を置くときは、type="button" を付ける意識が大切です。これを忘れると、クリックしたときにフォーム送信として扱われる場合があります。

buttonタグの基本的な書き方

基本形は、開始タグと終了タグの間にボタンに表示したい文字を入れます。

<button type="submit">送信する</button>

このように書くと、画面には「送信する」と書かれたボタンが表示されます。input type="submit" でも送信ボタンは作れますが、buttonタグは中にテキストだけでなく、アイコンや強調用の要素を入れやすい点が特徴です。

<button type="button">
  <span>メニューを開く</span>
</button>

初心者の段階では、まず「フォーム送信なら submit、送信しない画面操作なら button」と分けて覚えると実務で困りにくくなります。

type属性の3種類を整理する

buttonタグで一番大切なのは type 属性です。特にフォームの中では、typeを省略すると意図しない送信につながることがあるため、明示しておくのが安全です。

type	役割	使う場面
`submit`	フォームを送信する	問い合わせ、ログイン、会員登録
`reset`	入力内容を初期状態へ戻す	入力をやり直すボタン。ただし実務では慎重に使う
`button`	それ自体では送信しない	モーダルを開く、表示を切り替える、JavaScriptで処理する

reset は便利そうに見えますが、入力済みの内容が一気に消えるため、実務のフォームではあまり気軽に置かないほうがよい場合もあります。ユーザーが間違って押すと、入力した内容を失ってしまうからです。

formタグと一緒に使うbuttonタグの例

問い合わせフォームの最後に送信ボタンを置く例を見てみましょう。フォーム全体は formタグで囲み、入力欄には inputタグを使います。

<form action="/contact" method="post">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">送信する</button>
</form>

この場合、buttonタグには type="submit" を指定しています。クリックすると、formタグの action に指定された送信先へフォームデータを送る流れになります。

一方、入力欄の横に「パスワードを表示する」ボタンを置くような場合は、フォーム送信ではなく画面操作です。この場合は type="button" を使います。

<button type="button">パスワードを表示する</button>

input type submitとの違い

HTMLでは、送信ボタンを <input type="submit"> で作ることもできます。どちらも送信ボタンとして使えますが、書き方と柔軟性に違いがあります。

書き方	特徴	初心者向けの使い分け
`<input type="submit" value="送信">`	短く書ける	単純な送信ボタン
`<button type="submit">送信</button>`	開始タグと終了タグの中に内容を書ける	文字やアイコンを含めたいボタン

現在のWeb制作では、見た目やアクセシビリティを整えやすいこともあり、buttonタグを使う場面が多いです。ただし、どちらを使っても大事なのは「何のためのボタンか」をコード上で分かるようにすることです。