【HTML】buttonタグの基本的な使い方とaタグとの使い分け

こんにちは！CODE CLUB965のKです！

今回は、Webサイトなどを作成する際によく使われるbuttonタグについて紹介します。

サイトを作る際によく使うので基本をしっかりおさえておきましょう！

buttonタグとは？

HTMLのbuttonタグは、そのままの意味ですが、ボタンを作るために使います。

例えば、フォームの「送信」や「リセット」のボタンを設置するためによく使われます。
その他に、クリックしたらJavaScriptで処理をしたい場合などにもよく使われます。

以下のような感じで使います。

<p>サイトはこちら↓↓↓</p>
<button type="button">クリックして移動</button>

■表示結果

サイトはこちら↓↓↓

基本的な使い方

まず基本として、type属性の3つを覚えましょう。
<button type="◯◯">という形で書きます。（<button type="submit">など）

以下にまとめます。

・submit
→ フォーム（<form>）の送信ボタンとして機能するようになります。
　ボタンを押すと、フォーム内の情報がサーバーに送られます。

・reset
→ フォーム（<form>）のリセットボタンとして機能するようになります。
　フォーム内の入力欄が全てリセットされます。

・button
→ これ自体はデフォルトでは何もしない無反応のボタンになります。
　「フォームの送信、リセット」以外、例えばJavaScriptを呼び出したいときなどに使用します。

aタグとの使い分け

HTML初心者の方であれば、「aタグ（リンクを作るタグ）との違いは何？」と思うかもしれません。
aタグもbuttonタグと同じように、クリックしたら反応するボタンになるからです。

基本的には以下のように使い分けるようにしておけば問題ありません。

・aタグを使う場合
　→クリックしたら他のページへ飛ぶようにしたい（リンク）

・buttonタグを使う場合
クリックしたらJavaScriptを呼び出したい
フォームの送信やリセットをしたい

補足：aタグの中にbuttonタグは入れないこと

「aタグの中に対話型コンテンツ（ボタンやチェックボックスのようにユーザーが操作できるコンテンツのこと）は入れてはいけない」というルールがあります。

buttonタグは、対話型コンテンツに当てはまるので aタグの中に buttonタグを入れないように気をつけて下さい。

<a href="/top">
  <button>クリック</button>
</a>

こんな感じで書かないように注意しましょう！

最後に

今回はHTMLではよく使うbuttonタグについて説明しました。
詳しい使い方については書かなかったので、具体的な例と一緒に別の記事で解説できればと思います。

それでは、また！

Follow me!