button要素の使い方

HTMLのbutton要素は、メニューを開く、フォームを送信する、ページ上の処理を実行するなど、ユーザーが操作するボタンを表します。

先に結論

最小の例

<button type="button">メニューを開く</button>

<form action="/search" method="get">
  <label for="keyword">キーワード</label>
  <input id="keyword" name="q">
  <button type="submit">検索</button>
</form>

type="button"は、JavaScriptなどでページ内の処理を実行するためのボタンです。type="submit"はフォームを送信します。

type属性で役割を選ぶ

値	主な役割	使う場面
button	フォームを送信・リセットしない	メニューの開閉、表示の切り替え、ページ内の操作
submit	フォームを送信する	検索、登録、ログインなど
reset	フォームの値を初期状態へ戻す	入力を一括して戻す必要がある場合だけ

typeを省略すると、通常のフォーム内では送信ボタンとして扱われます。送信する意図がないボタンでは、省略せずtype="button"を指定すると意図が明確です。

フォームを送信するボタン

送信ボタンは、フォームの入力内容を送信するきっかけになります。ボタンにnameとvalueを指定した場合、そのボタンが送信を開始したときに送信データへ含める値として使えます。

実際のサービスでは、送信先のサーバー側でも入力内容を確認します。ブラウザー側の検証だけを安全対策にしてはいけません。

ボタンには目的が分かる名前を付ける

buttonの表示テキストは、ユーザーが操作の結果を予測できる具体的な言葉にします。「ここをクリック」だけではなく、「メニューを開く」「保存する」「検索する」のように書きます。

<button type="button" aria-expanded="false">メニューを開く</button>

<button type="button" aria-label="設定を開く">
  <span aria-hidden="true">⚙</span>
</button>

アイコンだけのボタンでは、表示テキストの代わりになるアクセシブルな名前を用意します。状態を表す場合は、aria-expandedなどの状態も実際の状態と同期させます。

リンクとボタンは使い分ける

目的	使う要素
別のページ、URL、ページ内の場所へ移動する	<a href="...">
現在のページでメニューやダイアログを操作する	<button type="button">
フォームの入力内容を送信する	<button type="submit">

divやspanにクリックイベントだけを追加してボタンの代わりにすると、キーボード操作や支援技術への対応を自分で補う必要が増えます。まず本来のbutton要素を使います。

よくある間違い

• フォーム内の操作用ボタンでtype="button"を省略し、意図せず送信する
• ページ移動なのにbuttonでURLへ移動させる
• divやspanをボタンとして使う
• アイコンだけを置き、ボタンの目的を伝える名前を用意しない
• 入力内容をすべて消すresetを、戻し方を説明せずに置く

もう少し詳しく

form属性を使うと、ボタンをフォームの外に置いたままフォームと関連付けられます。送信ボタンではformaction、formmethod、formnovalidate、formtargetなどで、その送信操作だけの条件を指定できます。

ダイアログやpopoverなどの標準機能を操作するボタンでは、commandとcommandforも関係します。高度な条件や処理の境界はAtlasで確認できます。

Atlasで確認する

typeの状態、フォーム所有者、activation behavior、command、DOM API、仕様上の根拠まで確認したい場合は、Yugien Atlasのbutton要素を参照してください。dialogの開閉に使うbuttonとの関係はdialog要素、リンクとの境界はAtlasのa要素でも確認できます。