The Wayback Machine - https://web.archive.org/web/20170813160213/https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

button 要素

HTML の <button> 要素は、クリック可能なボタンを表します。

コンテンツカテゴリー フローコンテンツ、フレージングコンテンツ、Interactive content、リスト化、ラベル付け可能、送信可能 な フォーム関連要素、パルパブルコンテンツ
許可された内容 フレージングコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フレージングコンテンツ を受け入れるすべての要素
許可された ARIA ロール checkbox、link、menuitem、menuitemcheckbox、menuitemradio、radio、switch、tab
DOM インターフェイス HTMLButtonElement

属性

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

autofocus HTML5
オートフォーカス。この要素は、(ユーザーが別の操作によって動作を上書きしない限り) ページ読み込み時に button 要素にインプットフォーカスを置くように指示するための属性です。文書中のフォーム関連要素のうちの一つだけに、この属性を指定することができます。値には属性名と同じ autofocus のみが指定可能です。
autocomplete
<button> 要素においてこの属性は、Firefox 独自の非標準属性です。Firefox のデフォルト動作は他のブラウザーと異なり、ページを再読み込みしても <button> を 動的に無効化した状態を維持します。この属性の値を off にする (すなわち autocomplete="off") と、この機能が無効になります。バグ 654072 をご覧ください。
disabled

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

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

form HTML5
button 要素が紐付けられた form 要素 (form owner) の id。属性値は同一文書内の <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 を指定したボタンには、デフォルトの動作はなく、クリックするなどしても何も起こりません。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定することができます。
  • menu: 指定した <menu> 要素で定義されたポップアップメニューを開くボタンになります。
value
ボタンの初期値。フォームデータとともに送信される、ボタンに関連付けられた値を定義します。この値はフォームを送信する際に、パラメーターとしてサーバーに渡されます。

注記

<button> 要素のスタイリングは <input> 要素よりもずっと簡単で、複雑なスタイリングも可能です。なぜなら <input> はテキストの value 属性のみを受け入れるのに対して、<button> は内部に <em> や <strong> や <img> 等、他の HTML 要素を持つことが可能であり、button 要素自身のみならず、子要素やそれらの擬似要素 (:after、:before) に対するスタイリングも可能だからです (※ただし空要素である <img> は擬似要素を持つことはできません)。

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

Firefox はアクセシビリティの観点から、フォーカスされたボタンに小さな点線ボーダーを表示するようになっています。このボーダーはブラウザーのデフォルト・スタイルシートで宣言されています。これは次のようなセレクタを用い、あなた自身のスタイルで上書きすることができます。
button::-moz-focus-inner { }
アクセシビリティに配慮したスタイリングを心がけてください。

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

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

クリックとフォーカス

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

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

例

<button name="button">Click me</button>

このボタンは CSS が適用されている点に注意してください。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
<button> の定義		 現行の標準  
HTML5
<button> の定義		 勧告  
HTML 4.01 Specification
<button> の定義		 勧告  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 (有) 1.0 (1.7 or earlier) (有) (有) (有)
formaction 属性 9.0 (有) 4.0 (2.0) 10 ? ?
formenctype 属性 9.0 (有) 4.0 (2.0) 10 10.6 ?
formmethod 属性 9.0 (有) 4.0 (2.0) 10 ? ?
autofocus 属性 5.0 (有) 4.0 (2.0) 10 9.6 5.0
type 属性の値 menu 未サポート 未サポート 未サポート[1] 未サポート 未サポート ?
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.0) (有) (有) (有)
formaction 属性 ? (有) 4.0 (2.0) ? ? ?
formenctype 属性 ? (有) 4.0 (2.0) ? ? ?
formmethod 属性 ? (有) 4.0 (2.0) ? ? ?
type 属性の値 menu ? 未サポート ? ? ? ?

[1] Gecko はこの機能が未実装です。バグ 1241353 をご覧ください。

関連情報

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

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, ethertank
 最終更新者: yyss,