HTML の <button>
要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。既定では、 HTML のボタンは ユーザーエージェント が実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | フローコンテンツ、記述コンテンツ、対話型コンテンツ、リスト化、ラベル付け可能、送信可能 な フォーム関連要素、知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ、但し対話型コンテンツがあってはならない |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | 記述コンテンツを受け入れるすべての要素。 |
許可されている ARIA ロール | checkbox , link , menuitem , menuitemcheckbox , menuitemradio , radio , switch , tab |
DOM インターフェイス | HTMLButtonElement |
属性
この要素はグローバル属性を持ちます。
autofocus
HTML5- 論理属性で、ページ読み込み時に (ユーザーが例えば他のコントロールに入力するなどして動作を上書きしない限り)、入力フォーカスを持つべきボタンであることを指定します。文書中のフォーム関連要素のうちの一つだけにこの属性を指定することができます。
autocomplete
<button>
要素におけるこの属性は、 Firefox 独自の非標準属性です。Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても<button>
を動的に無効化した状態を維持します。autocomplete="off"
に設定すると、この機能が無効になります。 バグ 654072 をご覧ください。disabled
-
論理属性で、ユーザーがボタンを操作することを抑止します。この属性が設定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる
<fieldset>
要素などにも disabled 属性が指定されていないのであれば、この子要素であるボタンは使用可能のままであるということです。Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても
<button>
を動的に無効化した状態を維持します。この機能はautocomplete
属性で制御できます。 form
HTML5- ボタンに関連付けられた
<form>
要素 (フォームオーナー) です。属性値は同一文書内の<form>
要素のid
属性と同一の値にしなくてはなりません。この属性を設定しなかった場合は、祖先に<form>
要素が存在すれば、その要素に関連付けられます。この属性によって<form>
要素の子孫にするだけでなく、同一文書内にある任意の<form>
要素に<button>
要素を関連付けることが可能になりました。 formaction
HTML5- ボタンによって送信された情報を処理する URL です。指定した場合は、そのボタンの属するフォームの
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
: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。get
: フォームのデータは、セパレーターとして '?' を使用してフォームのaction
の URL に追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。
この属性が指定された場合、これはボタンのフォームオーナーの
method
属性より優先して使用されます。 formnovalidate
HTML5- 論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を検証しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの
novalidate
属性より優先して使用されます。 formtarget
HTML5- ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、閲覧コンテキスト (タブ、ウィンドウ、インラインフレーム) の
name
またはそれを表すキーワードです。この属性が指定された場合、ボタンの属するフォームオーナーのtarget
属性より優先されます。以下のキーワードは特別な意味を持ちます。_self
: 同じ閲覧コンテキストにレスポンスデータを読み込みます。これは、属性が指定されていない場合の既定値です。_blank
: 新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — にレスポンスデータを読み込みます。_parent
: 現在のコンテキストの親の閲覧コンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは_self
と同じ振る舞いをします。_top
: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) にレスポンスデータを読み込みます。親要素がない場合、このオプションは_self
と同じ振る舞いをします。
name
- フォームデータの一部としてボタンの
value
との組み合わせで送信される、ボタンの名前です。 type
- ボタンの種別。以下の値を指定可能です。
submit
: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これはtype
属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。reset
:<input type="reset">
と同様に、すべてのコントロールを初期値にリセットするボタンです。button
: ボタンには既定の動作がなく、押されても何も行いません。クライアントサイドスクリプトを要素のイベントに関連付けることで、イベントが発生したときに実行させます。
value
- ボタンの初期値です。フォームデータと一緒に送信する際に、ボタンの
name
と関連付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。
メモ
<button>
要素は <input>
要素よりもずっと簡単に整形できます。 <input>
が value
属性に文字列を設定することしかできないのに対し、内部に HTML コンテンツを追加できますし (<em>
、 <strong>
や <img>
さえも)、複雑な描画のために ::after
や ::before
疑似要素を使用することもできます。
ボタンがサーバーにデータを送信するためのものでない場合は、 button
に type
属性を設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。
Internet Explorer 7 には <button type="submit" name="myButton" value="foo">Click me</button>
でフォームデータを送信したとき、 POST
データが myButton=foo
ではなく myButton=Click me
として送信されるバグがあります。この問題は Internet Explorer 6 ではもっと悪く、ボタンを介してフォームデータを送信すると、 Internet Explorer 7 と同様の方法でフォーム内のすべてのボタンが送信されるバグもあります。このバグは Internet Explorer 8 で修正されました。
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>
ボタンのテキストを、アクセシブルな方法で視覚的に隠したい場合は、 CSS プロパティの組み合わせを使用して画面から削除し、支援技術からは解析可能のままにします。
しかし、ボタンのテキストを視覚的に見えるようにしておけば、アイコンの意味に慣れていない人がボタンの目的を理解できるようになります。これは特に、技術的に慣れていない人や、アイコンボタンが使用するアイコンの文化的解釈が異なる人に適しています。
大きさと近接性
大きさ
ボタンなどの対話型要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。 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 プロパティを使用して作成することができます。
Firefox
Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 button
を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。::-moz-focus-inner
{ }
上書きした場合は、弱視の人が知覚するのの十分なほど、フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認することが重要です。
色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 bold
の 18.66px 以上、または 24px 以上と定義されています。)
クリックとフォーカス
<button>
をクリックしたときに (既定で) フォーカスを得るかは、ブラウザーおよび OS により異なります。<input>
要素では type="button"
、type="submit"
ともに同じ動作になります。
デスクトップ版ブラウザー | 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 |
モバイル版ブラウザー | 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
関連情報
フォーム作成に用いるその他の要素: <form>
, <datalist>
, <fieldset>
, <input>
, <label>
, <legend>
, <meter>
, <optgroup>
, <option>
, <output>
, <progress>
, <select>
, <textarea>