HTML

The button element is used to create a button that users can click to perform some action.

button 要素

<button> 要素は、ユーザーがクリックすることでアクションを実行するためのボタンを作成します。テキストやアイコンなど、ボタンに表示したい内容をタグの中に書きます。

HTML

<button>Click me</button>

この例では「Click me」という文字が表示されたボタンが作成されます。クリック時の動作は後述の JavaScript で自由に追加できます。

よく使う属性

type 属性

ボタンの種類を指定します。主な値は以下の通りです。

"submit"（デフォルト）
フォームを送信します。
→ type を省略すると自動的に submit になります。
"button"
通常のボタン。フォーム送信をさせたくないときに明示して使います。
"reset"
フォームの入力内容をリセットします。
補足：reset は「同じ <form> 内の 入力コントロール」だけを初期値に戻します。他のフォームには影響しません。（form 属性でフォームに関連付けた場合も同様です）

HTML

<!-- type を省略すると submit ボタンになる -->
<button>送信</button>

<!-- 送信しない通常ボタン -->
<button type="button">ただのボタン</button>

注意：フォームの中にある <button> で type を省略すると 送信されます。クリックだけの用途なら、必ず type="button" を付けましょう。

なお、フォームの外にある <button> は submit でも送信先がないため送信されません（クリック時の動作は JavaScript 等で与えます）。

※ただし、form="formのid" を指定してフォームに関連付けた場合は、フォームの外にあっても送信できます。

disabled 属性

ボタンを無効化し、クリックできないようにします。グレー表示になり「同意する」にチェックを入れるまで押せないボタンなどで利用されます。

HTML

<button disabled>送信</button>

補足：disabled にしたボタンは フォーカスできず送信対象にもなりません（name/value も送られません）。

name 属性・value 属性

フォーム送信時に、ボタンが押されたときの名前と値をサーバーに送ります。

HTML

<form action="submit" method="post">
<button type="submit" name="submit" value="clicked">送信</button>
</form>

補足：サーバーに送られるのは「実際に送信に使われた ボタン」の name=value です。値を確実に扱いたい場合は、value を 明示 しましょう。

補足的な属性

autofocus
ページ読み込み時に自動でフォーカスされます。
formaction, formmethod など
type="submit" のボタンで送信先や送信方法を上書きできます。

HTML

<form action="/default" method="post">
	<!-- デフォルトの送信先 -->
	<button type="submit">通常送信</button>

	<!-- このボタンだけ送信先を上書き -->
	<button type="submit" formaction="/alt" formmethod="post">
		別URLへ送信
	</button>
</form>

同じ <form> 内でもボタンごとに送信先を切り替えられます（確認画面行きボタンと通常送信ボタンを並置するような実務パターンに有効）。

CSS で見た目を変更

CSS

button {
	display: inline-block;
	padding: 1ex 2ex;
	margin: 1ex;
	font-size: larger;
	box-shadow: 0.2ex 0.2ex 0.3ex;
}

おすすめ：キーボード操作に優しいよう、:focus-visible のスタイル（アウトライン）を消さずに 見やすく しましょう。button:disabled { cursor: not-allowed; opacity: .6; } のような無効時の見た目を付けるのも有効です。

CSS

button:focus-visible {
	outline: 2px solid blue; /* キーボード操作時に見やすい枠 */
	outline-offset: 2px;
}

このようにしておくと、キーボード操作でもボタンの位置がはっきりわかります。

JavaScript で動きを追加

onclick 属性でクリック時の動作を指定できます。

実務では、保守性や再利用性のためにインラインの onclick ではなく、外部JSで addEventListener('click', …) を使う方法が推奨されます。

実務のコツ：フォームの中で使うときは、誤送信防止のため type="button" を付けたうえで onclick を使います。

HTML + JavaScript

<button onclick="myFunction()">クリック</button>

<script>
	function myFunction() {
		alert("ボタンがクリックされました！");
	}
</script>

ボタンの中に入れて良いもの / ダメなもの

<button> の中に入れられるのは テキストやアイコンなどの「フレージングコンテンツ」 です。

他のボタン・リンク・入力など「別のインタラクティブ要素」を入れるのはNG。思わぬ挙動やアクセシビリティ問題の原因になります。

アイコンのみのボタンは 視覚的なラベルがない ので、aria-label="閉じる" のように 意味が伝わるラベルを明示 しましょう。

補足 : title 属性でも補助的に説明できますが、スクリーンリーダーには aria-label を付けるのがより確実です。

まとめ