HTML <button> ボタン要素

試してみましょう

<button class="favorite styled" type="button">お気に入りに追加</button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

属性

この要素にはグローバル属性があります。

autofocus

論理属性で、ページ読み込み時にこのボタンが入力フォーカスを持つべきであることを指定します。この属性を設定することができるのは、文書中の要素一つだけです。

command

制御ボタンの <button> によって制御される、 commandfor 属性で指定した要素に対して実行するアクションを指定します。実現可能な値は次のとおりです。

"show-modal"

このボタンは、 <dialog> をモーダルとして表示させます。ダイアログがすでにモーダルである場合は、何もしません。これは、 HTMLDialogElement.showModal() メソッドを <dialog> 要素で呼び出すことと同じ意味の宣言的な方法です。

"close"

このボタンは、 <dialog> 要素を閉じます。 ダイアログがすでに閉じられている場合、何もしません。 これは、 HTMLDialogElement.close() メソッドを <dialog> 要素で呼び出すことと同じ意味の宣言的な方法です。 value 属性を指定した場合、ボタンの値はダイアログの returnValue プロパティとして渡されます。

"request-close"

このボタンは、 cancel イベントを <dialog> 要素上で発行し、ブラウザーにダイアログを閉じるよう要求し、続いて close イベントを発行します。 これは close コマンドとは異なり、作成者は Event.preventDefault() を cancel イベントに対して呼び出すことで <dialog> が閉じるのを防ぐことができます。 ダイアログが既に閉じられている場合は、何も行われません。 これは、 HTMLDialogElement.requestClose() メソッドを <dialog> 要素に対して呼び出すことと同等の宣言的な方法です。 ボタンの value 属性を指定した場合、その値がダイアログの returnValue プロパティとして渡されます。

"show-popover"

このボタンは、非表示のポップオーバーを表示します。すでに表示されているポップオーバーを表示しようとすると、何もしません。詳細については、ポップオーバー API を参照してください。これは、 show の値を popovertargetaction 属性に設定することに相当し、ポップオーバー要素に対して HTMLElement.showPopover() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"hide-popover"

このボタンは、表示されているポップオーバーを非表示にします。すでに非表示になっているポップオーバーを非表示にしようとすると、何もしません。詳細については、ポップオーバー API を参照してください。これは、 hide の値を popovertargetaction 属性に設定することに相当し、ポップオーバー要素で HTMLElement.hidePopover() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"toggle-popover"

このボタンは、ポップオーバーの表示と非表示を切り替えます。ポップオーバーが非表示の場合は表示され、ポップオーバーが表示されている場合は非表示になります。詳細については、ポップオーバー API を参照してください。これは、 toggle の値を popovertargetaction 属性に設定することに相当し、ポップオーバー要素で HTMLElement.togglePopover() メソッドを呼び出すことと同じ意味の宣言的な方法です。

カスタム値

この属性は、 2 つのハイフン文字 (--) を接頭辞として付加したカスタム値を表します。カスタム値を持つボタンは、制御される要素で CommandEvent を配信します。

commandfor

<button> 要素をコマンドボタンに変換し、ボタンに指定された command 属性で定義されたコマンドを発行することで、指定された対話要素を制御します。 commandfor 属性は、制御対象となる要素の ID を値として取ります。これは popovertarget のより汎用的なバージョンです。

disabled

これは論理属性で、ユーザーがボタンを操作することを抑止します。押したりフォーカスを受けたりすることができなくなります。

form

ボタンに関連付けられた <form> 要素（フォームオーナー）です。この属性の値は、同一文書内の <form> 要素の id 属性と同一でなければなりません。（この属性を設定しなかった場合、 <button> は祖先に <form> 要素が存在すれば、その要素に関連付けられます。）

この属性によって <button> 要素が <form> の中になくても、同一文書内にある任意の <form> 要素に関連付けることが可能になりました。また、祖先の <form> 要素を上書きすることができます。

formaction

このボタンによって送信された情報を処理する URL です。このボタンのフォームオーナーの action 属性よりも優先されます。フォームオーナーがない場合は何もしません。

formenctype

このボタンが送信ボタンである場合（<form> の中にあるか関連付けられており、 type="button" が設定されていない場合）、送信されるフォームデータのエンコード方法を指定します。指定可能な値は以下の通りです。

• application/x-www-form-urlencoded: この属性が使用されなかった場合のデフォルト値。
• multipart/form-data: <input> 要素の type 属性に file を指定して使用する場合に使用します。
• text/plain: デバッグ目的で指定されるものです。実際のフォーム送信で使用すべきではありません。

この属性が指定された場合、そのボタンのフォームオーナーの enctype 属性より優先されます。

formmethod

このボタンが送信ボタンである場合（<form> の中にあるか関連付けられており、 type="button" が設定されていない場合）、この属性はこのフォームを送信するのに使用される HTTP メソッドを指定します。指定可能な値は以下の通りです。

• post: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。
• get: フォームのデータは、フォームの action の URL に、セパレーターとして '?' を使用して追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。
• dialog: このメソッドは、ボタンが関連付けられたダイアログを閉じ、フォームデータをまったく送信しないことを示すために使用します。

指定された場合、この属性はボタンのフォームオーナーの method 属性より優先して使用されます。

formnovalidate

論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を検証しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの novalidate 属性より優先して使用されます。

この属性は <input type="image"> および <input type="submit"> 要素でも使用できます。

formtarget

ボタンが送信ボタンである場合、フォームの送信後に受信するレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、閲覧コンテキスト（タブ、ウィンドウ、<iframe>）の name またはそれを表すキーワードです。この属性が指定された場合、ボタンのフォームオーナーの target 属性より優先されます。以下のキーワードは特別な意味を持ちます。

• _self: レスポンスを同じ閲覧コンテキストに読み込みます。これは、属性が指定されていない場合のデフォルト値です。
• _blank: レスポンスを新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — に読み込みます。
• _parent: レスポンスを現在のコンテキストの親の閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
• _top: レスポンスを最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) に読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。

interestfor

この <button> 要素を関心インボーカーとして定義します。その値は対象要素の id であり、インボーカー要素に対して関心が向けられたり失われたりした際（例えば、ホバーやホバー解除、フォーカスやフォーカス解除など）、この対象要素に何らかの影響（通常は表示または非表示）が及ぶようになります。詳細や例については、関心インボーカーの使用をご覧ください。

name

このボタンの名前で、フォームデータの一部としてこのボタンの value との組み合わせで送信されます。

popovertarget

<button> 要素をポップオーバーの制御ボタンに変換します。制御するポップオーバー要素の ID を値として受け取ります。 popovertarget 属性を指定してポップオーバーとその呼び出し元ボタンとの関連付けを設定すると、2 つの有益な効果が追加されます。

• ブラウザーは、ポップオーバーと呼び出し元との間に暗黙の aria-details および aria-expanded の関係を作成し、ポップオーバーが表示されたときに、キーボードフォーカスナビゲーションの順序で論理的な位置にポップオーバーを配置します。これにより、キーボードおよび支援技術 (AT) のユーザーもポップオーバーにアクセスしやすくなります （「ポップオーバーのアクセシビリティ機能」も参照してください）。
• ブラウザーは、2 つの間に暗黙のアンカー参照を作成するため、CSS アンカー位置指定を使用して、コントロールを基準にしてポップオーバーを相対的に位置指定することがとても便利です。詳細については、「ポップオーバーのアンカー位置指定」を参照してください。

popovertargetaction

制御用 <button> によって制御されているポップオーバー要素に対して実行される動作を指定します。使用可能な値は以下の通りです。

"hide"

このボタンは、表示されているポップオーバーを非表示にします。非表示になっているポップオーバーを非表示にしようとした場合、何も行われません。

"show"

このボタンは、非表示のポップオーバーを表示します。すでに表示されているポップオーバーを表示しようとしても、何の動作も起こりません。

"toggle"

ポップオーバーの表示・非表示を切り替えるボタンです。ポップオーバーが非表示の場合は表示され、ポップオーバーが表示されている場合は非表示になります。popovertargetaction が省略された場合、"toggle" がこのコントロールボタンによって実行されるデフォルトの動作です。

type

このボタンのデフォルトの動作です。以下の値が指定可能です。

• submit: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が <form> に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合のデフォルト値です。
• reset: このボタンはすべてのコントロールを初期値に初期化します。 <input type="reset"> と同様です。 (この動作はユーザーを困らせる傾向があります。)
• button: ボタンにはデフォルトの動作がなく、デフォルトでは押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。

value

フォームのデータと一緒に送信される際に、ボタンの name に結び付けられる値を定義します。 この値は、フォームに送信する際にサーバーに引数として渡されます。 close または request-close コマンドで使用した場合、value 属性は、制御対象の <dialog> 要素の returnValue を設定します。

メモ

送信ボタンに formaction 属性が設定されていても、関連付けられたフォームがない場合は何もしません。ボタンを <form> で囲むか、 form でフォームの id を設定するかしてフォームオーナーを設定する必要があります。

<button> 要素は <input> 要素よりもずっと簡単にスタイル付けできます。内部に HTML コンテンツを（<i>、 <br> や <img> さえも）追加できますし、複雑な描画のために ::after や ::before 擬似要素を使用することもできます。

ボタンがサーバーにデータを送信するためのものでない場合は、 type 属性を button に設定することを忘れないでください。さもないと、フォームデータを送信して（存在しない）レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。

<button type="button"> にはデフォルトの動作がありませんが、イベントハンドラーを記述して動作を起動することができます。起動されたボタンは JavaScript を用いてプログラム可能なアクションを実行することができます。例えばアイテムをリストから削除するなどです。

デフォルトでは、ユーザーエージェントはボタンを display: flow-root としてスタイル設定します。これにより、新しいブロック整形コンテキストが確立され、ボタンがオーバーフローしない限り、ボタンの中の子要素が水平方向と垂直方向の両方で中央に配置されます。ボタンがフレックスまたはグリッドコンテナーとして定義されている場合、子要素はフレックスまたはグリッドアイテムとして動作します。 display: inline に設定されたボタンは、値が display: inline-block に設定されているかのようにスタイル設定されます。

アクセシビリティ

アイコンボタン

アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名はスクリーンリーダーのような支援技術で文書を解析し、アクセシビリティツリーを生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。

アイコンボタンにアクセシブル名を与えるには、 <button> 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。

例

<button name="favorite">
  <svg fill="black" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  お気に入りに追加
</button>

結果

ボタンのテキストを、アクセス可能な方法で視覚的に隠したい場合は、CSS プロパティの組み合わせを使用して画面から削除し、支援技術からは解析可能のままにします。

しかし、ボタンのテキストを視覚的に見えるようにしておけば、アイコンの意味に慣れていない人がボタンの目的を理解できるようになります。これは特に、技術的に慣れていない人や、アイコンボタンが使用するアイコンの文化的解釈が異なる人に適しています。

• What is an accessible name? | Vispero
• MDN WCAG を理解する ― ガイドライン 4.1 の解説
• Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0

大きさと近接性

大きさ

ボタンなどの操作可能な要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。44×44 CSS ピクセル以上の操作のための大きさが推奨されています。

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

近接性

たくさんの操作可能なコンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った操作可能なコンテンツを有効化してしまうことがある人にとって有益です。

間隔は margin などの CSS プロパティを使用して作成することができます。

• Hand tremors and the giant-button-problem - Axess Lab

ARIA 状態情報

ボタンの状態を記述するために使用する正しい ARIA 属性は aria-pressed であり、aria-checked や aria-selected ではありません。詳しくは、 ARIA button ロールについての情報をご覧ください。

ボタンのスタイル

フォーカスを持つ要素のデフォルトのフォーカスリングは上書きしないことが望ましいです。ボタンスタイルが上書きされる場合、視覚障碍のあるユーザーが認識でき、認知能力に違いのあるユーザーも理解できるように、フォーカス状態のコントラストが十分であることを保証することが重要です。

:focus-visible 擬似クラスを使用すると、ユーザーエージェントのヒューリスティックがフォーカスを強調表示すべきであると判断した場合（たとえば、<button> がキーボードのフォーカスを受け取った場合など）にのみ、 :focus を保有する要素にスタイルを適用することができます。詳細については、:focus と :focus-visible を参照してください。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 bold の 18.66px 以上、または 24px 以上と定義されています。)

• WebAIM: Color Contrast Checker
• MDN WCAG を理解する ― ガイドライン 1.4 の解説
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

クリックとフォーカス

<button> や <input> のボタン型をクリックしたときに（デフォルトで）フォーカスを得るかは、ブラウザーおよび OS により異なります。多くのブラウザーはクリックされているボタンにフォーカスを与えますが、Safari は設計上そうなりません。

例

基本的なボタンの作成

この例では、クリック可能なボタンを作成します。 type="button" 属性により、ボタンにデフォルトの動作が設定されないようになります。 JavaScript や command、commandfor などの属性を使用することで、このボタンを操作可能にすることができます。

<button type="button" name="button">これはボタンです</button>

request-close 値を command 属性で使用

この例では、ダイアログを閉じることができるかどうかを制御する2つのラジオボタンがあります。 はいまたはいいえを選択し、閉じるをクリックして、ダイアログを閉じようとしてみてください。 はいが選択された場合、ダイアログは閉じられます。いいえが選択された場合、ダイアログは開いたままになり、代わりにメッセージが表示されます。

<button type="button" commandfor="mydialog" command="show-modal">
  ダイアログを開く
</button>
<dialog id="mydialog">
  <div class="wrapper">
    <form>
      <fieldset>
        <legend>リクエストされた場合、このダイアログを閉じることを許可しますか？</legend>
        <div>
          <input type="radio" id="no" name="close" value="no" checked />
          <label for="no">いいえ</label>
        </div>
        <div>
          <input type="radio" id="yes" name="close" value="yes" />
          <label for="yes">はい</label>
        </div>
      </fieldset>
    </form>
    <button commandfor="mydialog" command="request-close">
      閉じるリクエスト
    </button>
    <p class="warning" hidden>このダイアログを閉じるには「はい」を選択してください。</p>
  </div>
</dialog>

.warning {
  color: tomato;
}

const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");

dialog.addEventListener("cancel", (e) => {
  if (!e.cancelable) return;
  if (radio.value === "no") {
    warning.hidden = false;
    e.preventDefault();
  } else {
    warning.hidden = true;
  }
});

ダイアログを開く ボタンを押すと、<dialog> 要素を command="show-modal" で開きます。

閉じるリクエスト ボタンには command="request-close" が設定されており、commandfor="mydialog" 属性でこの <dialog> 要素を対象にしています。クリックされると、 クリックされると、<dialog> に閉じることができるか問い合わせます（<dialog> を即座に閉じる command="close" 属性とは異なります）。 これは、<dialog> が cancel イベントを使用して cancelable であるかどうかを調べます。

イベントが cancelable である場合、ラジオボタンの値が調べられます。

• yes に設定すると、ダイアログが閉じられます。
• no に設定すると、警告メッセージの hidden 属性が無効になり、preventDefault() メソッドが呼び出されます。これにより、デフォルトの <dialog> によるウィンドウを閉じる動作が抑止されます。

ダイアログの close コマンドで value 属性を使用する

この例では、ボタンの value 属性に close コマンドをつけて、ダイアログの returnValue プロパティの値を設定する方法を示しています。

キャンセル または 削除 ボタンがクリックされると、ダイアログが閉じられ、その returnValue がボタンの value 属性に設定されます。 close イベントのリスナーは、dialog.returnValue を調べ、ユーザーがどの操作を選択したかを判断し、その結果を画面にログ出力します。

HTML

HTML ではまず、commandfor 属性を使用して開くためのダイアログを指定するレコードを削除ボタンを定義します。

ダイアログ内のキャンセルおよび削除ボタンでは、commandfor 属性を使用して、それらが現在のダイアログに適用されることを示します。 同時に、command 属性を "close" に設定し、value 属性をそれぞれ "cancel" および "delete" に設定します。ボタンがクリックされると、選択されたボタンの値が自動的にダイアログの returnValue にコピーされます。

<button commandfor="confirm-dialog" command="show-modal">レコードを削除</button>
<dialog id="confirm-dialog">
  <header>
    <h1>レコードを削除しますか?</h1>
  </header>
  <p>本当によろしいですか？この操作は元に戻せません</p>
  <footer>
    <button commandfor="confirm-dialog" command="close" value="cancel">
      キャンセル
    </button>
    <button commandfor="confirm-dialog" command="close" value="delete">
      削除
    </button>
  </footer>
</dialog>

<pre id="log"></pre>

#log {
  height: 20px;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = text;
}

JavaScript

このコードでは、close イベントリスナーを使用して、ダイアログの returnValue をログ出力します。

const dialog = document.getElementById("confirm-dialog");

dialog.addEventListener("close", () => {
  switch (dialog.returnValue) {
    case "cancel":
      log("キャンセルがクリックされました");
      break;
    case "delete":
      log("削除がクリックされました");
      break;
    default:
      log("閉じたときの値: ", dialog.returnValue);
  }
});

結果

技術的概要

仕様書

ブラウザーの互換性