HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<button>
ボタン要素。クリック可能なボタンを作成するために使用されます。フォームの送信やJavaScriptによる操作の起点となります。
info
概要
<button> 要素は、ユーザーがクリックできるボタンを表現します。フォーム内で使用する場合、そのボタンの type 属性によって、フォームを送信するボタン（type="submit" - デフォルト）、フォームをリセットするボタン（type="reset"）、または単にスクリプトを起動するためのボタン（type="button"）として機能します。
ボタンのラベルは、要素の内容として自由にHTML要素（画像、強調タグなど）を含めることができます。
play_circle
デモ (静的表示)
HTML (Source)
<button type="button">
クリックしてください
</button>
<br><br>
<button type="submit" class="button-link">
フォームを送信
</button>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| type | ボタンの種類を指定します。これが最も重要な属性です。submit: フォームを送信（デフォルト）reset: フォーム入力をリセットbutton: スクリプトで動作する汎用ボタン
|
| name | フォーム送信時に、ボタンを識別するために使用される名前です。 |
| value | フォーム送信時に、ボタンの name と共にサーバーに送信される値です。 |
| disabled | この属性が存在する場合、ボタンは無効になりクリックできなくなります。 |
| form | ボタンが属する <form> 要素のidを指定します。ボタンがフォームの外に配置されていても、この属性で関連付けられます。 |
| autofocus | この属性が存在する場合、ページが読み込まれたときに自動的にボタンにフォーカスが当たります。 |
code
実用例
1. フォーム送信ボタン（最も一般的）
<form action="/submit" method="post">
<input type="text" name="user_name">
<button type="submit" name="action" value="send">
送信する
</button>
</form>
2. JavaScriptでイベントを処理するボタン
<!-- type="button" はフォーム送信を行いません -->
<button type="button" onclick="showAlert()">
アラートを表示
</button>
<!-- JavaScript側: function showAlert() { alert('Hello!'); } -->
3. 無効化された（disabled）ボタン
<!-- disabled 属性によりクリック不可になる -->
<button type="submit" disabled>
送信できません
</button>
lightbulb
知っておくべき重要事項
warning
<button>と<input type="submit">の違い
<button> 要素は、内容にHTML要素を含めることができるため、よりリッチなデザインのボタンを作成できます。対して <input type="submit"> はテキストのみしか表示できません。現代のWeb開発では <button> が推奨されます。
accessibility_new
アクセシビリティ
ボタンの内容は、スクリーンリーダーのユーザーに対してその機能が明確に伝わるようにする必要があります。アイコンのみのボタンの場合は、必ず
ボタンの内容は、スクリーンリーダーのユーザーに対してその機能が明確に伝わるようにする必要があります。アイコンのみのボタンの場合は、必ず
aria-label 属性を用いて説明的なテキストを提供しましょう。