<button>: ボタン要素

HTML の <button> 要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。既定では、 HTML のボタンは ユーザーエージェント が実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。

コンテンツカテゴリ フローコンテンツ記述コンテンツ対話型コンテンツリスト化ラベル付け可能送信可能フォーム関連要素、知覚可能コンテンツ
許可されている内容 記述コンテンツ、但し対話型コンテンツがあってはならない
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素。
暗黙の ARIA ロール button
許可されている ARIA ロール checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
DOM インターフェイス HTMLButtonElement

属性

この要素はグローバル属性を持ちます。

autofocus
論理属性で、ページ読み込み時にこのボタンが入力フォーカスを持つべきであることを指定します。文書中の要素一つだけにこの属性を設定することができます。
autocomplete この API は標準化されていません。
<button> におけるこの属性は標準外であり、 Firefox 固有のものです。他のブラウザーとは異なり、 Firefox はページを再度読み込む時に動的に無効化した状態を維持します。そのボタンに autocomplete="off" に設定すると、この機能が無効になります。 バグ 654072 をご覧ください。
disabled

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

Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても <button>動的に無効化した状態を維持します。この機能は autocomplete 属性で制御できます。

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 をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。

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

formnovalidate
論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を検証しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの novalidate 属性より優先して使用されます。
この属性は <input type="image"> および <input type="submit"> 要素でも使用できます。
formtarget
ボタンが送信ボタンである場合、フォームの送信後に受信するレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、閲覧コンテキスト (タブ、ウィンドウ、<iframe>) の name またはそれを表すキーワードです。この属性が指定された場合、ボタンのフォームオーナーの target 属性より優先されます。以下のキーワードは特別な意味を持ちます。
  • _self: レスポンスを同じ閲覧コンテキストに読み込みます。これは、属性が指定されていない場合の既定値です。
  • _blank: レスポンスを新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — に読み込みます。
  • _parent: レスポンスを現在のコンテキストの親の閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
  • _top: レスポンスを最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) に読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
name
このボタンの名前で、フォームデータの一部としてこのボタンの value との組み合わせで送信されます。
type
このボタンの既定の動作です。以下の値が指定可能です。
  • submit: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が <form> に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。
  • reset: このボタンはすべてのコントロールを初期値に初期化します。 <input type="reset"> と同様です。 (この動作はユーザーを困らせる傾向があります。)
  • button: ボタンには既定の動作がなく、既定では押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。
value
フォームのデータと一緒に送信される際に、ボタンの name に結び付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。

メモ

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

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

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

<button name="button">クリックしてね</button>

アクセシビリティの考慮

アイコンボタン

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

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

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg>
  お気に入りに追加
</button>

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

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

大きさと近接性

大きさ

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

近接性

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

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

ARIA 状態情報

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

Firefox

Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 button::-moz-focus-inner { } (en-US) を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。

上書きした場合は、弱視の人が知覚するのの十分なほど、フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認することが重要です。

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

クリックとフォーカス

<button> をクリックしたときに (既定で) フォーカスを得るかは、ブラウザーおよび OS により異なります。<input> 要素では type="button"type="submit" ともに同じ動作になります。

<button> をクリックするとフォーカスを得るかどうか
デスクトップ版ブラウザー Windows 8.1 OS X 10.X
Firefox はい - Firefox 30.0 いいえ (tabindex がある場合でも) Firefox 63
Chrome はい - Chrome 35 はい - Chrome 65
Safari N/A いいえ (tabindex がある場合でも) Safari 12
Internet Explorer はい - Internet Explorer 11 N/A
Presto はい - Opera 12 はい - Opera 12
<button> をタップするとフォーカスを得るかどうか
モバイル版ブラウザー iOS 7.1.2 Android 4.4.4
Safari Mobile いいえ (tabindex がある場合でも) N/A
Chrome 35 いいえ (tabindex がある場合でも) はい

仕様書

仕様書 状態 備考
HTML Living Standard
<button> の定義
現行の標準
HTML5
<button> の定義
勧告
HTML 4.01 Specification
<button> の定義
勧告

ブラウザーの互換性

BCD tables only load in the browser