<button>: ボタン要素

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

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

autofocus HTML5

この論理属性で、ページ読み込み時に（ユーザーが例えば他のコントロールに入力するなどして動作を上書きしない限り）、入力フォーカスを持つべきボタンであることを指定することができます。文書中のフォーム関連要素のうちの一つだけにこの属性を指定することができます。

autocomplete

<button> 要素においてこの属性は、 Firefox 独自の非標準属性です。Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても <button> を動的に無効化した状態を維持します。この属性の値を off にする（すなわち autocomplete="off"）と、この機能が無効になります。 バグ 654072 をご覧ください。

disabled

この論理属性は、ユーザーによるボタン操作を無効化します。この属性が指定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる <fieldset> 要素などにも disabled 属性が指定されていないのであれば、この子要素である button 要素は使用可能のままであるということです。

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

form HTML5

ボタンに関連付けられた form 要素（form owner）です。属性値は同一文書内の <form> 要素の id 属性と同一の値にしなくてはなりません。この属性を指定しない場合は、祖先に <form> 要素が存在すれば、その要素に関連付けられます。この属性によって <form> 要素の子孫にするだけでなく、同一文書内にある任意の <form> 要素に <button> 要素を関連付けることが可能になりました。

formaction HTML5

ボタンによって送信された情報を処理するプログラムの URI。指定した場合は、そのボタンの属するフォームの action 属性よりも優先されます。

formenctype HTML5

ボタンを送信ボタンとして使用する場合、ブラウザーがフォーム情報をサーバーに送信するために使用するコンテンツの種類を指定します。以下の値を指定可能です。

• application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
• multipart/form-data: <input> 要素の type 属性に file を指定して使用する場合に使用。
• text/plain: プレーンテキストとしてフォームデータを送信する場合に使用。

この属性が指定されている場合、button 属性が紐付けられた form 要素 (form owner)の enctype 属性より、ボタンのそれが優先されます。

formmethod HTML5

ボタンが送信ボタンの場合に、ブラウザーがフォーム情報を伝送するために使用する HTTP メソッド。以下の値を指定可能です。

• post: フォームからのデータはフォームの内容を含めてサーバーに送信されます。
• get: フォームからのデータはセパレーターとして '?' を使用して form 属性の URI に追加され、その結果となる URI をサーバーに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。

ボタンに対しこの属性が指定された場合、これはボタンの属するフォーム (form owner) の method 属性より優先して使用されます。

formnovalidate HTML5

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

formtarget HTML5

ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示す名前もしくはキーワード。これは、閲覧コンテキスト（タブ、ウィンドウ、インラインフレーム）の名前またはキーワードを参照します。この属性が指定された場合、ボタンの属するフォーム（form owner）の target より優先されます。以下のキーワードは特別な意味を持ちます。

• _self: 同じ閲覧コンテキストにレスポンスデータを読み込みます。この値は、属性が指定されていない場合の既定値です。
• _blank: 新しい無名の閲覧コンテキストにレスポンスデータを読み込みます。
• _parent: 現在のコンテキストの親の閲覧コンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
• _top: 最上位の閲覧コンテキスト（現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト）にレスポンスデータを読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。

name

フォーム情報とともに送信される、ボタンの名前。

type

ボタンの種別。以下の値を指定可能です。

• submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。
• reset: ボタンに紐づけられたフォームコントロールの値をすべて初期値に戻すリセットボタンになります。
• button: type 属性に button を指定したボタンには、既定の動作はなく、クリックするなどしても何も起こりません。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定することができます。

value

ボタンの初期値。フォームデータとともに送信される、ボタンに関連付けられた値を定義します。この値はフォームを送信する際に、引数としてサーバーに渡されます。

メモ

<button> 要素は <input> 要素よりもずっと簡単に整形できます。 <input> が value 属性に文字列を設定することしかできないのに対し、内部に HTML コンテンツを追加できますし (<em>、 <strong> や <img> さえも)、複雑な描画のために ::after や ::before 疑似要素を使用することもできます。

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

IE7 には <button type="submit" name="myButton" value="foo">Click me</button> でフォームデータを送信したとき、 POST データが myButton=foo ではなく myButton=Click me として送信されるバグがあります。
IE6 は IE7 と同様のバグを持ち、さらに悪いことにボタンを介してフォームデータを送信すると、フォーム内のすべてのボタンが送信されるバグも持っています。
このバグは IE8 で修正されました。

Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても <button> を動的に無効化した状態を維持します。 autocomplete 属性の値を off にすると、この機能が無効になります。 バグ 654072 をご覧ください。

Android 版 Firefox のバージョン35より前では、すべてのボタンに既定でグラデーションの background-image を設定していました (バグ 763671 をご覧ください)。これは background-image: none を使用して無効化できます。

例

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

アクセシビリティの考慮事項

アイコンボタン

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

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

例

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

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

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

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

近接性

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

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

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

Firefox

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

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

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (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> をクリックしたときに（既定で）フォーカスを得るかは、ブラウザーおよび OS により異なります。<input> 要素では type="button"、type="submit" ともに同じ動作になります。

仕様書

ブラウザーの対応

関連情報

フォーム作成に用いるその他の要素: <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>