概要
HTML の <button> 要素は、クリック可能なボタンを表します。
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、リスト化、ラベル付け可能、送信可能なフォーム関連要素、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フレージングコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLButtonElement |
| 要素タイプ | インライン |
属性
この要素はグローバル属性を持ちます。
autofocusHTML5- オートフォーカス。この要素は、(ユーザが別の操作によって動作を上書きしない限り) ページ読み込み時に button 要素にインプットフォーカスを置くように指示するための属性です。文書中のフォーム関連要素のうちの一つだけに、この属性を指定することができます。値には属性名と同じ
autofocusのみが指定可能です。 autocomplete<button>要素においてこの属性は、Firefox 独自の非標準属性です。Firefox のデフォルト動作は他のブラウザと異なり、ページを再読み込みしても<button>を動的に無効化した状態を維持します。この属性の値をoffにする (すなわちautocomplete="off") と、この機能が無効になります。バグ 654072 をご覧ください。disabled-
この論理属性は、ユーザによるボタン操作を無効化します。この属性が指定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる
<fieldset>要素などにも disabled 属性が指定されていないのであれば、この子要素である button 要素は使用可能のままであるということです。Firefox のデフォルト動作は他のブラウザと異なり、ページを再読み込みしても
<button>を動的に無効化した状態を維持します。この機能はautocomplete属性で制御できます。 formHTML5- button 要素が紐付けられた form 要素 (form owner) の id。属性値は同一文書内の
<form>要素の id 属性と同一の値としなくてはなりません。この属性を指定しない場合、<button>要素は紐付ける form 要素の子孫要素として配置しなくてはなりません。HTML5 で定められたこの属性によって、紐付けたい<form>要素の外 (同一文書内に限る) に<button>要素を配置することが可能になりました。 formactionHTML5- ボタンによって送信された情報を処理するプログラムの URI。指定した場合は、そのボタンの属するフォームの
action属性よりも優先されます。 formenctypeHTML5- ボタンを送信ボタンとして使用する場合、ブラウザがフォーム情報をサーバーに送信するために使用するコンテンツの種類を指定します。以下の値を指定可能です。
application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。multipart/form-data:<input>要素のtype属性にfileを指定して使用する場合に使用。text/plain: プレーンテキストとしてフォームデータを送信する場合に使用。
この属性が指定されている場合、button 属性が紐付けられた form 要素 (form owner)の
enctype属性より、ボタンのそれが優先されます。 formmethodHTML5- ボタンが送信ボタンの場合に、ブラウザがフォーム情報を伝送するために使用する HTTP メソッド。以下の値を指定可能です。
post: フォームからのデータはフォームの内容を含めてサーバーに送信されます。get: フォームからのデータはセパレーターとして '?' を使用して form 属性の URI に追加され、その結果となる URI をサーバーに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。
ボタンに対しこの属性が指定された場合、これはボタンの属するフォーム (form owner) の
method属性より優先して使用されます。 formnovalidateHTML5- この論理属性は、ボタンが送信ボタンである場合に、フォームデータ送信時に内容をバリデートしないように指定するものです。この属性が指定された場合、ボタンの属するフォーム (form owner) の
novalidate属性より優先して使用されます。 formtargetHTML5- ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示す名前もしくはキーワード。これは、ブラウジングコンテキスト (タブ、ウィンドウ、またはインラインフレーム) の名前またはキーワードを参照します。この属性が指定された場合、ボタンの属するフォーム (form owner) の
targetより優先されます。以下のキーワードは特別な意味を持ちます:_self: 同じブラウジングコンテキストにレスポンスデータを読み込みます。この値は、属性が指定されていない場合のデフォルト値です。_blank: 新しい無名のブラウジングコンテキストにレスポンスデータを読み込みます。_parent: 現在のコンテキストの親のブラウジングコンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは_selfと同じ振る舞いをします。_top: 最上位のブラウジングコンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたないブラウジングコンテキスト) にレスポンスデータを読み込みます。親要素がない場合、このオプションは_selfと同じ振る舞いをします。
name- フォーム情報とともに送信される、ボタンの名前。
type- ボタンの種別。以下の値を指定可能です。
submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これはtype属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合のデフォルトの動作です。reset: ボタンに紐づけられたフォームコントロールの値をすべて初期値に戻すリセットボタンになります。button: type 属性にbuttonを指定したボタンには、デフォルトの動作はなく、クリックするなどしても何も起こりません。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定することができます。
value- ボタンの初期値。
例
<button name="button">Click me</button>
このボタンは CSS が適用されている点に注意してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <button> の定義 |
現行の標準 | |
| HTML5 <button> の定義 |
勧告 | |
| HTML 4.01 Specification <button> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | 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 |
| 機能 | Android | 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) | ? | ? | ? |
クリックとフォーカス
<button> をクリックしたときに (デフォルトで) フォーカスを得るかは、ブラウザおよび OS により異なります。
<input> 要素では type="button"、type="submit" ともに同じ動作になります。
| デスクトップ版ブラウザ | 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) | はい | はい |
| モバイル版ブラウザ | iOS 7.1.2 | Android 4.4.4 |
|---|---|---|
| Safari Mobile | いいえ (tabindex がある場合でも) |
N/A |
| Chrome 35 | いいえ (tabindex がある場合でも) |
はい |
注記
<button> 要素のスタイリングは <input> 要素よりもずっと簡単で、複雑なスタイリングも可能です。なぜなら <input> はテキストの value 属性のみを受け入れるのに対して、<button> は内部に <em> や <strong> や <img> 等、他の HTML 要素を持つことが可能であり、button 要素自身のみならず、子要素やそれらの擬似要素 (:after、:before) に対するスタイリングも可能だからです (※ただし空要素である は擬似要素を持つことはできません)。
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 を使用して無効化できます。
関連情報
フォーム作成に用いるその他の要素: <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>