HTML

A beginner-friendly page that shows how buttons work—submitting forms, running actions, or going to a URL—using short code examples for default submit vs button, Enter-key submit, formaction, and accessible labels.

button 要素

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

HTML

<button>Click me</button>

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

よく使う属性

type 属性

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

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

実務メモ：type="reset" は入力を消してしまうため誤操作の事故が起きやすく、近年はあまり使われません。使うなら確認ダイアログや目立たない配置で。

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 を 明示 しましょう。

また、a と button は互いに入れ子にしません（どちらもインタラクティブ要素のため入れ子は不可・非推奨）。

ページやURLへ「移動」するだけなら <a href> を使うのが基本です。button はページ内の開閉や送信など「その場の操作」を担います。

HTML

<!-- こう書けばOK：遷移は a -->
<a href="/next">次へ</a>

<!-- どうしても button で遷移したいとき -->
<button type="button" onclick="location.href='/next'">次へ</button>

Enterで送信される理由（暗黙の submit）

フォーム内のボタンは既定で type="submit" です。テキスト入力中に Enter を押すと「暗黙の送信」が起きます。クリック用途だけのボタンは type="button" を明示します。

HTML

<button type="button">クリックだけ（送信しない）</button>

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

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

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

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

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

ボタンからURLへ移動する最短メモ

遷移に button を使う場合は、最短で下のように書けます（本来は a 推奨）。

HTML

<button type="button" onclick="location.href='/next'">次へ</button>

formaction で送信先をボタンごとに切り替え

同じフォームでも、ボタンごとに送信先・メソッド等を変えられます（確認画面／本送信など）。

HTML

<form id="contact" action="/send" method="post">
	<input name="email" required>
	<button type="submit">通常送信</button>
	<button type="submit" formaction="/confirm" formmethod="get" formtarget="_blank">確認画面へ</button>
</form>

フォームの外から送信する（form 属性）

ボタンがフォームの外にあっても、form 属性で対象フォームを指定できます。

HTML

<form id="f1" action="/send">...</form>
	<button type="submit" form="f1">このフォームを送信</button>

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>

二重送信を防ぐ小ワザ

連打で重複送信しないよう、クリック直後に一時的に無効化します（サーバー側でもトークン等で対策すると万全）。

HTML

<button type="submit" onclick="this.disabled=true; this.form.submit();">送信</button>

ボタン関連の補助属性（一覧）

formaction
このボタンだけ送信先URLを変更
formmethod
このボタンだけ送信方法（GET/POST など）
formtarget
このボタンだけ別タブ等へ送信（例：_blank）
formenctype
このボタンだけエンコード方式（例：multipart/form-data）
formnovalidate
このボタンだけ入力チェックをスキップ
autofocus
ページ読込時に自動フォーカス。使いどころは限定的（予期しないスクロールや読み上げ開始の原因になり得る）。

よくあるエラー早見表

押してないのにEnterで送信される
原因：フォーム内ボタンの既定が submit。対処：クリック用途は type="button" を明示。
URLに移動したいだけなのにJSが必要になった
原因：button を使っている。対処：遷移は <a href> を基本に。
送信先だけ別URLにしたい
対処：そのボタンに formaction（必要なら formmethod / formtarget）。
ボタンが“押せない”
原因：disabled が付いている／重なりでクリックを奪われている。対処：属性確認とCSSの重なり（z-index, pointer-events）確認。
スクリーンリーダーで意味が伝わらない
原因：アイコンだけでラベルなし。対処：aria-label か視覚的に隠したテキストを追加。
連打で二重送信される
対処：クリック直後に this.disabled=true を入れる／サーバー側でも重複防止トークン。

アクセシビリティ（誰でも使えるボタンに）

見た目は同じでも、人によって操作のしかた・見え方は違います。HTMLで意味を作り、必要なところだけARIAで補助情報を足すと、読み上げやキーボード操作でも使いやすくなります。

アイコンだけのボタンにラベルをつける

見た目がアイコンだけでも、音声読み上げに名前を伝えます。

HTML

<button type="button" aria-label="閉じる">✕</button>

トグル状態を伝える（aria-pressed）

トグル（ON/OFF）ボタンのように状態を表すときは、aria-pressed を使います。

HTML

<button type="button" aria-pressed="false" id="muteBtn">ミュート</button>
<script>
	const b = document.getElementById("muteBtn");
	b.addEventListener("click", () => {
		const on = b.getAttribute("aria-pressed") === "true";
		b.setAttribute("aria-pressed", String(!on));
	});
</script>

disabled と aria-disabled の使い分け

disabled はフォーカス不可・クリック不可・送信対象外です。見た目だけ無効風にしたい（条件で有効化する等）なら aria-disabled="true" を使い、JavaScriptで実際の動作を制御します。

HTML

<!-- 完全に無効 -->
<button type="button" disabled>処理中...</button>

<!-- 見た目だけ無効（キー操作は無効化するJSが別途必要） -->
<button type="button" aria-disabled="true">準備中</button>

キーボード操作・フォーカスの最小ルール