HTMLのbuttonタグの使い方まとめ(属性/イベント/CSSなど)

html

HTMLのbuttonタグは、クリック可能なボタンを作成するために使用されます。

ボタンは、フォームの送信、ダイアログの表示、JavaScriptによるアクションのトリガーなど、Webページ上で様々なインタラクティブな要素として機能します。
この記事ではbuttonタグの基本的な使い方、属性、種類、イベント処理などについてサンプルコードを交えて書いています。

buttonタグの基本的な使い方

buttonタグは、開始タグ(<button>)と終了タグ(</button>)で囲まれたコンテンツ（テキスト、画像、アイコンなど）を表示します。

<button>クリックしてください</button>
<button>
    <img src="icon.png" width="24" alt="アイコン">
    <span>送信</span>
</button>

上記のHTMLは、ブラウザでクリック可能なボタンとして表示されます。
実際にブラウザで表示すると、下記のようになりました。
HTMLのbuttonタグの確認

buttonタグの属性

buttonタグは、動作や外観、アクセシビリティを制御するための様々な属性をサポートしています。

type属性

ボタンの種類を指定します。
* button (デフォルト): 何も特別な動作をしません。通常はJavaScriptと組み合わせて使用します。
* submit: ボタンがクリックされると、関連付けられたフォームを送信します。
* reset: ボタンがクリックされると、関連付けられたフォームの要素を初期値にリセットします。

name属性

フォーム送信時に、ボタンの値をサーバーに送信するための名前を指定します。

value属性

フォーム送信時に、ボタンに関連付けられた値をサーバーに送信します。

disabled属性

ボタンを無効化します。無効化されたボタンはクリックできず、フォーカスも当たりません。

form属性

ボタンが属するフォームをform要素のid属性で指定します。
ボタンがフォーム要素の外に配置されている場合に便利です。

formaction属性

type="submit"の場合に、フォームデータを送信する先のURLを指定します。
<form>要素のaction属性を上書きします。

formenctype属性

type="submit"の場合に、フォームデータのエンコード方式を指定します。
<form>要素のenctype属性を上書きします。

formmethod属性

type="submit"の場合に、フォームデータの送信方法（getまたはpost）を指定します。
<form>要素のmethod属性を上書きします。

formnovalidate属性

type="submit"の場合に、フォーム送信時のバリデーションを無効化します。

グローバル属性

class, id, style, title, tabindex など、他のHTML要素と同様のグローバル属性も使用できます。

type属性の例

<form action="/process" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" name="name"><br><br>
  <button type="submit">送信</button>
  <button type="reset">リセット</button>
  <button type="button" onclick="showAlert()">アラート表示</button>
</form>

<script>
  function showAlert() {
    alert('ボタンがクリックされました！');
  }
</script>

送信ボタン(type="submit")はtype="submit"なので、クリックされると関連付けられた<form>要素（この例では action=”/process”、method=”post” のフォーム）のデータをサーバーの/processというURLにPOSTメソッドで送信します。
フォーム内のinput要素などの name 属性と value 属性がサーバーに送られます。

リセットボタン(type="reset")はtype="reset"です。
クリックされると関連付けられたform要素内のすべてのフォームコントロール（<input>, <textarea>, <select>など）の値を、それぞれの初期値に戻します。

アラート表示ボタン(type="button")はtype="button"なので、デフォルトでは何の特別な動作もしません。
しかし、onclick属性にJavaScriptのshowAlert関数が指定されているため、このボタンがクリックされるとshowAlert関数が実行され、ブラウザにアラートメッセージ「ボタンがクリックされました！」が表示されます。
type="button"は、一般的にはJavaScriptと組み合わせてカスタムな動作を実装する際に使用されます。

実際に表示して使用してみると、それぞれ機能していることが確認できます。
type属性の使用例

buttonタグとイベント処理 (JavaScript)

buttonタグは、onclick, onmouseover, onmouseout などの様々なイベントハンドラー属性をサポートしています。
JavaScriptを使用することでインタラクティブな動作を実装できます。

<button onclick="changeText(this)">テキストを変更</button>
<p id="output">初期テキスト</p>

<script>
  function changeText(buttonElement) {
    document.getElementById('output').textContent = 'ボタンがクリックされました！';
    buttonElement.textContent = '変更済み！';
  }
</script>

HTMLに「テキストを変更」と表示されたボタンと、「初期テキスト」と表示された段落(pタグ)があります。
ボタンがクリックされると、HTMLに埋め込まれたJavaScriptのコードが実行されます。

JavaScriptのコードは、changeTextという名前の小さなプログラム（関数）として定義されています。
このchangeText関数は、ボタンがクリックされたときに、以下の2つのことを行います。

  1. 段落のテキストを変える
    まずidがoutputである段落（最初は「初期テキスト」と表示されています）を探し出します。
    そして、その中身を「ボタンがクリックされました！」という新しいテキストに書き換えます。

  2. ボタンの表示を変える
    クリックされたボタン自身（「テキストを変更」と表示されていたボタン）を探し出して、その表示を「変更済み！」という新しいテキストに書き換えます。
    changeText関数に渡されたbuttonElement変数のtextContentプロパティにアクセスして変更しています。

「テキストを変更」ボタンをクリックすると、ページ上の「初期テキスト」という文字が「ボタンがクリックされました！」に変わります。
そして、さらにボタンの表示も「変更済み！」に変わります。

実際にブラウザで表示すると、下記のようになりました。
HTMLのbuttonタグのイベントを確認

buttonタグのアクセシビリティ

buttonタグはセマンティックな要素であり、デフォルトでキーボード操作（Tabキーでのフォーカス、Enter/Spaceキーでのクリック）やスクリーンリーダーによる読み上げなど、基本的なアクセシビリティ機能が備わっています。
アクセシビリティをさらに向上させるためには、以下の点に注意することが重要です。

適切なラベル

ボタンの目的が明確になるようなテキストコンテンツを提供します。
アイコンのみのボタンの場合は、aria-label 属性や title 属性を使用して、ボタンの目的を説明するテキストを提供します。

<button aria-label="新しいメールを作成する">
  <img src="mail-icon.png" alt="">
</button>

<button title="印刷">
  <img src="print-icon.png" alt="">
</button>

disabled属性の適切な使用

無効な状態のボタンには disabled 属性を設定し、その理由を title 属性などで説明すると、スクリーンリーダーのユーザーに伝わりやすくなります。

<button type="submit" disabled title="入力内容に不備があるため送信できません">送信</button>

buttonタグにCSSでスタイルを適用する

buttonタグは、CSSを使用して外観を自由にカスタマイズできます。
フォント、色、背景、ボーダー、パディング、マージンなど、様々なスタイルプロパティを適用できます。

button {
  background-color: #4CAF50; /* 緑 */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049; /* ホバー時の色 */
}

button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

buttonタグに対して、CSSでスタイルを適用しています。
通常時に緑にして、ホバー時に少し色を変えています。

実際にブラウザに表示すると、下記のようになります。
buttonタグにCSSでスタイルを適用

buttonタグを使用する際の注意点

  • <input type="button"> との違い: どちらもボタンを作成しますが、buttonタグはテキストだけでなく、画像や他のインライン要素を内部に含めることができるため、より柔軟なコンテンツ表現が可能です。特別な理由がない限り、buttonタグの使用が推奨されます。

  • フォームの送信を防ぐ場合: 意図せずフォームが送信されるのを防ぎたい場合は、type="button"を明示的に指定するか、JavaScriptでevent.preventDefault()を呼び出す必要があります。

  • スタイルのリセット: ブラウザによってボタンのデフォルトスタイルが異なる場合があるため、必要に応じてCSSでスタイルをリセットしてからカスタマイズすると、より一貫した外観を実現できます。

まとめ

buttonタグは、Webページにインタラクティブな要素を追加するための基本的なHTML要素です。
type属性による種類の選択、JavaScript によるイベント処理、そして適切なアクセシビリティ対応を行うことで、ユーザーにとって使いやすく、機能的なボタンを作成できます。

HTML
yasuaki

コメント