💡 この記事でわかること
- buttonタグとは何か
- buttonタグの基本的な書き方
- type属性(button・submit・reset)の違い
- aタグ・input要素との使い分け
- 初心者がつまずきやすいポイント
1. buttonタグとは？
<button>タグは、
👉 クリックできるボタンをWebページ上に表示するための要素です。
フォームの送信ボタンとして使われるほか、JavaScriptと組み合わせて「クリックしたら処理を実行する」といった用途にもよく使われます。
2. buttonタグの基本的な書き方
基本的な書き方は以下の通りです。
<button>クリック</button>開始タグと終了タグの間に書いた文字が、そのままボタンに表示されるテキストになります。
💡 テキストだけでなく、画像やアイコンなど他の要素をタグの中に入れることもできます。
<button>
<img src="icon.png" alt=""> 送信する
</button>3. type属性の違い
<button>タグには type 属性を指定できます。指定を省略した場合の挙動はブラウザによって扱いが分かれることがあるため、意図した動作にするには明示的に指定しておくと安心です。
type="submit"
フォームの内容を送信するボタンになります。<form>タグの中に置いた場合、多くのブラウザではこれが初期値として扱われます。
<button type="submit">送信</button>type="reset"
フォーム内の入力内容をすべて初期状態に戻すボタンです。
<button type="reset">リセット</button>type="button"
フォームの送信・リセットを行わない、単純なボタンです。JavaScriptで独自の処理を実行したいときはこちらを指定します。
<button type="button">クリック</button>4. JavaScriptと組み合わせて使う
フォームの送信を伴わない単純な処理を実行したい場合は、type="button"とaddEventListenerを組み合わせるのが基本です。
<button type="button" id="myButton">クリック</button>
<script>
document.getElementById("myButton").addEventListener("click", () => {
alert("ボタンが押されました");
});
</script>👉 JavaScriptのaddEventListenerについての記事はこちら
5. aタグ・input要素との使い分け
初心者がよく迷うのが、<button>と<a>、<input type="submit">の使い分けです。
- <a>タグ：別のページやページ内の場所へ移動するときに使う
- <button>タグ：ページ内で何らかの処理を実行するときに使う
- <input type="submit">：フォーム送信専用。<button>タグの中にテキスト以外の要素を入れたい場合は<button>タグの方が柔軟
💡 「見た目はリンクのようだが実際はページ移動を伴わない」という場合は、<a>タグではなく<button>タグを使うのが適切です。逆に、URLへの移動を伴う操作を<button>タグとJavaScriptで無理に実装するのは避けましょう。
6. 初心者がつまずきやすいポイント
フォーム内でtype属性を省略している
フォームの中に置いた<button>タグは、type属性を省略するとsubmitとして扱われることが多く、意図せずフォームが送信されてしまうことがあります。JavaScriptで処理だけを行いたい場合は、必ずtype="button"を明示しましょう。
disabled属性でボタンを無効化する
disabled属性を付けると、ボタンをクリックできない状態にできます。入力チェックが完了するまで送信ボタンを押せないようにしたい場合などに使います。
<button type="submit" disabled>送信</button>まとめ
<button>タグは、type属性によって「送信」「リセット」「単純なクリック処理」を使い分けられる要素です。フォーム内で使う場合はtype属性を省略せずに明示すること、ページ移動が目的の場合は<a>タグを使うことを意識しておくと、意図しない挙動を防げます。