HTML の <button> 要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。既定では、 HTML のボタンは {{Glossary("user agent", "ユーザーエージェント")}} が実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。
<button>
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
button
この要素はグローバル属性を持ちます。
autocomplete="off"
論理属性で、ユーザーがボタンを操作することを抑止します。押したりフォーカスを受けたりすることができなくなります。
Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を動的に無効化した状態を維持します。この機能は {{htmlattrxref("autocomplete","button")}} 属性で制御できます。
<form>
id
type="button"
application/x-www-form-urlencoded
multipart/form-data
file
text/plain
この属性が指定された場合、そのボタンのフォームオーナーの {{htmlattrxref("enctype","form")}} 属性より優先されます。
post
get
action
指定された場合、この属性はボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。
<input type="image">
<input type="submit">
name
_self
_blank
_parent
_top
value
submit
reset
送信ボタンに formaction 属性が設定されていても、関連付けられたフォームがない場合は何もしません。ボタンを <form> で囲むか、 form でフォームの id を設定するかしてフォームオーナーを設定する必要があります。
formaction
form
<button> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単にスタイル付けできます。内部に HTML コンテンツを (<em>、 <strong> や <img> さえも) 追加できますし、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 擬似要素を使用することもできます。
<em>
<strong>
<img>
ボタンがサーバーにデータを送信するためのものでない場合は、 type 属性を button に設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。
type
<button name="button">クリックしてね</button>
{{ EmbedLiveSample('Example', 200, 64) }}
アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名は画面リーダーのような支援技術で文書を解析し、アクセシビリティツリーを生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。
アイコンボタンにアクセシブル名を与えるには、 <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 ピクセル以上の操作のための大きさが推奨されています。
たくさんの対話型コンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。
間隔は {{cssxref("margin")}} などの CSS プロパティを使用して作成することができます。
ボタンの状態を記述するために使用する正しい ARIA 属性は aria-pressed であり、 aria-checked や aria-selected ではありません。詳しくは、 ARIA button ロールについての情報をご覧ください。
aria-pressed
aria-checked
aria-selected
Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 button::-moz-focus-inner { } を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。
button::-moz-focus-inner { }
上書きした場合は、弱視の人が知覚するのの十分なほど、フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認することが重要です。
色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 {{cssxref("font-weight", "bold")}} の 18.66px 以上、または 24px 以上と定義されています。)
{{HTMLElement("button")}} をクリックしたときに (既定で) フォーカスを得るかは、ブラウザーおよび OS により異なります。{{HTMLElement("input")}} 要素では type="button"、type="submit" ともに同じ動作になります。
type="submit"
tabindex
{{Compat("html.elements.button")}}