<button>: BUTTON 要素
最終更新：2026-10-13
<button>BUTTON 要素
<button> 要素はクリック可能なボタンを作成します。<input type="button"> と違い、テキスト・アイコン・画像など任意のHTMLを含められます。既定の type は submit です。
| カテゴリ | フォーム |
|---|---|
| コンテンツモデル | フレージングコンテンツ（対話型コンテンツは不可） |
| 許可される親要素 | フレージングコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </button> タグ |
| ステータス | 標準 |
📝 構文
<button type="button">ボタンのテキスト</button>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
type | Keyword | The behavior type of the button.
|
name | Text | Button name, submitted with the form. |
value | Text | The value submitted with the button. |
disabled | Boolean | Disables the button. |
form | Form ID | Associates the button with a form (can be outside it). |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <button> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： フォーム外のボタンには type="button" を指定しましょう。指定しないとクリック時に予期せず送信されることがあります。
❓ よくある質問
Qbutton の type 属性にはどんな値がありますか？デフォルトはどれですか？
A3つの値があります：
submit（フォーム送信）、reset（リセット）、button（既定動作なし）。デフォルトは submit です。フォームの外なら問題ありませんが、フォーム内で type を書かないボタンは意図せず送信を起こします。これが最もよくある落とし穴なので、type は常に明示しましょう。Qbutton と input type='button' の違いは何ですか？
A
<button> はコンテンツモデルが豊富で、アイコン・太字テキスト・入れ子要素を置けます。<input type='button'> は value によるプレーンテキストしか設定できず、子要素も持てません。現代のプロジェクトでは <button> に統一するのが推奨です。Qbutton の中に別の button を入れ子にできますか？
Aできません。インタラクティブ要素の入れ子は禁止です。
<button> の中に <button>、<a>、<input> などは置けません。複合的な操作が必要なら構造を分けるか、JS で外側のコンテナにイベントを委譲します。🏷️ 関連タグ
💡 関連ケース
📚 関連チュートリアル
