buttonタグ -クリックできるボタンを作成する｜HTML辞典
<button>タグとは？
<button> タグは、ユーザーがクリックできるボタンを作成するためのタグ です。type 属性を設定することで、送信ボタン、リセットボタン、一般的なボタンとして使用できます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、インタラクティブコンテンツ（Interactive Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<button> は開始タグ（<button>）と閉じタグ（</button>）の両方が必要です。
基本的な記述方法
<button type="submit">送信</button>使用できる主な属性
<button> タグにはさまざまな属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
type | ボタンの種類を指定 | <button type="button">クリック</button> |
name | フォーム送信時のボタンの名前 | <button name="submit-btn">送信</button> |
value | フォーム送信時のボタンの値 | <button value="send">送信</button> |
disabled | ボタンを無効化 | <button disabled>無効なボタン</button> |
autofocus | ページ読み込み時にフォーカスを当てる | <button autofocus>最初にフォーカス</button> |
form | 別のフォームに関連付ける | <button form="myForm">送信</button> |
CSSを使ったデザイン変更
ボタンのデザインを調整したい場合は、CSSを活用できます。
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}適切な使用例
✅ 一般的なクリックボタン
<button type="button" onclick="alert('ボタンがクリックされました')">クリック</button>✅ フォームの送信ボタン
<form action="submit.php" method="post">
<button type="submit">送信</button>
</form>✅ フォームのリセットボタン
<form>
<input type="text" name="name" placeholder="名前を入力">
<button type="reset">リセット</button>
</form>✅ disabled を使用してボタンを無効化する
<button disabled>このボタンは無効</button>✅ form を使用して異なるフォームを操作する
<form id="myForm" action="submit.php">
<input type="text" name="email" placeholder="メールアドレス">
</form>
<button type="submit" form="myForm">送信</button>適切でない使用例（誤った使い方）
❌ type を指定しないとデフォルトで submit になってしまう
<!-- NG: type属性なし（デフォルトで type="submit" になる） -->
<button>クリック</button>✅ 正しい書き方（type を明示的に指定）
<button type="button">クリック</button>❌ button の中に a タグを入れるのはNG
<!-- NG: <a> タグを <button> の中に記述 -->
<button><a href="https://example.com">リンク</a></button>✅ 正しい書き方（<button> の onclick で遷移）
<button onclick="location.href='https://example.com'">リンクへ移動</button><button>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<button> | クリック可能なボタン | type="submit", type="reset" などが利用可能 | フォームの送信、ボタンの作成 |
<input type="submit"> | フォーム送信ボタン | ボタンの中にテキストを含められない | シンプルな送信ボタン |
<a> | リンクを作成 | href で移動先を指定 | ページ遷移ボタンの代用 |
<div> | コンテンツのグループ化 | スタイルやスクリプトの適用 | ボタン以外のデザイン要素 |
使用上の注意点
✅ type を明示的に指定する
type="button"を指定しないと、デフォルトでtype="submit"になるため、意図しない動作を防ぐ。
✅ disabled を使用して不要なボタンを無効化できる
- 例：
<button disabled>ボタン</button>
✅ form 属性を使って異なるフォームを操作できる
- フォーム外のボタンを特定のフォームに関連付けられる。
関連タグ
まとめ
<button>タグは、HTML文書内で ユーザーがクリックできるボタンを作成するためのタグ です。type を適切に設定し、フォーム送信・リセット・通常ボタンなどの用途に応じて使用できます。
