HTML buttonタグについて

buttonタグの定義と使用説明

HTML <button>タグは、クリックするためのボタンを作成するために使用されます。このタグを用いることにより、フォームの送信、JavaScriptの関数の呼び出しなど、様々なインタラクティブなアクションを実行することができます。

ブラウザのサポート程度

<button>タグは、主要なすべての現代的なブラウザでサポートされています。以下の表は、サポートが一般的なブラウザの一覧です:

ブラウザ	対応状況
Google Chrome	完全対応
Mozilla Firefox	完全対応
Safari	完全対応
Microsoft Edge	完全対応
Opera	完全対応

buttonタグの属性

<button>タグにはいくつかの重要な属性があります:

type: ボタンのタイプを指定します。値としては "button", "submit", "reset" があります。
name: ボタンの名前を指定します。
value: ボタンの値を指定します。
disabled: ボタンを無効化します。
autofocus: ページが読み込まれた際に自動的にフォーカスを設定します。

buttonタグのイベント

<button>タグは以下のようなイベントに対応しています:

onclick: ボタンがクリックされたときに発生します。
onmouseover: ボタンにマウスカーソルが乗ったときに発生します。
onmouseout: ボタンからマウスカーソルが離れたときに発生します。
onfocus: ボタンにフォーカスが合ったときに発生します。
onblur: ボタンからフォーカスが外れたときに発生します。

コード例

以下は簡単な<button>タグの使用例です:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>buttonタグの例</title>
    <script>
        function showAlert() {
            alert('ボタンがクリックされました!');
        }
    </script>
</head>
<body>

    <button type="button" onclick="showAlert()">クリックしてね</button>

</body>
</html>

QA

Q1: <button>と<input type="button">の違いは何ですか?

A1: <button>タグは、内部にHTMLコンテンツ（例えばアイコンとテキスト）を含むことができますが、<input type="button">は単一のテキストしか含むことができません。

Q2: disabled属性の役割は何ですか?

A2: disabled属性は、ボタンを無効化し、ユーザーがクリックできない状態にします。

Q3: ボタンのデフォルトのtypeは何ですか?

A3: <button>タグのデフォルトのtype属性は "submit" です。