Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<button>
『button』要素はクリックできるボタンを作成します。『input』のボタン系タイプと異なり、要素の中にHTMLを入れられるため、アイコンや装飾を含む柔軟なボタンが作成できます。
構文
<!-- フォーム送信ボタン --> <button type="submit">送信する</button> <!-- 汎用ボタン（JavaScriptで処理） --> <button type="button">クリック</button> <!-- 無効化されたボタン --> <button type="button" disabled>使用不可</button> <!-- HTMLを含むボタン --> <button type="button"> <img src="icon.png" alt=""> 検索 </button>
属性一覧
| 属性 | 概要 |
|---|---|
| type | ボタンの動作を指定します。『submit』（送信）・『button』（汎用）・『reset』（リセット）の3種類があります。 |
| name | ボタンの名前を指定します。複数の送信ボタンがある場合に、どのボタンが押されたかを識別するために使います。 |
| value | フォーム送信時にサーバーへ送る値を指定します。 |
| disabled | ボタンをグレーアウトして押せない状態にします。値は不要な論理属性です。 |
| form | ボタンを関連付けるフォームの『id』を指定します。フォームの外にボタンを置く場合に使います。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>button要素</title>
<style>
button {
padding: 8px 16px;
margin: 4px;
border-radius: 4px;
cursor: pointer;
}
.btn-primary { background: #3498db; color: #fff; border: none; }
.btn-danger { background: #e74c3c; color: #fff; border: none; }
</style>
</head>
<body>
<form id="myForm" action="/send" method="post">
<p>
<label for="name">お名前：<input type="text" id="name" name="name"></label>
</p>
</form>
<!-- form属性でフォームの外からも送信ボタンとして機能する -->
<button type="submit" form="myForm" class="btn-primary">送信する</button>
<!-- 汎用ボタン（JavaScriptで処理） -->
<button type="button" onclick="alert('こんにちは！')">あいさつ</button>
<!-- 無効化されたボタン -->
<button type="button" class="btn-danger" disabled>削除（無効）</button>
</body>
</html>
実行結果
青い「送信する」ボタン、「あいさつ」ボタン、グレーアウトされた「削除（無効）」ボタンが表示されます。「あいさつ」をクリックするとアラートが表示され、「削除（無効）」はクリックできません。
<!-- ブラウザ上での表示イメージ -->
お名前：[________________]
[ 送信する ] [ あいさつ ] [ 削除（無効） ]
↑クリックで ↑クリック不可
アラート表示
概要
『button』要素の最大の特徴は、内容にHTMLを含められる点です。テキストだけでなくアイコン画像やSVGなどを入れることができるため、デザインの自由度が高くなります。また、CSSによるスタイルも柔軟に適用できます。
『type』属性を省略すると、フォーム内では自動的に『submit』として動作します。JavaScriptのイベントだけに使いたいボタンは必ず『type="button"』を明示してください。意図せずフォームが送信されるバグの原因になります。
『name』と『value』の組み合わせは、1つのフォームに複数の送信ボタンを設置する際に便利です。どのボタンが押されたかをサーバー側で判定できます。入力系の他のコントロールについては『input（ボタン・その他）』のページも参照してください。
対応ブラウザ
デスクトップ
Chrome49 以降 ○全バージョンで対応しています
Firefox57 以降 ○全バージョンで対応しています
Safari18 以降 ○全バージョンで対応しています
Edge80 以降 ○11 以前 ×
IE11 以前 ×
Opera48 以前 ×モバイル
iOS Safari18 以降 ○全バージョンで対応しています
Android Browser37 以降 ○4 以前 ×
Chrome Android36 以降 ○17 以前 ×
Firefox Android79 以降 ○3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする