HTML の <button> 要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。既定では、 HTML のボタンは {{Glossary("user agent", "ユーザーエージェント")}} が実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。
<button>
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
この要素はグローバル属性を持ちます。
autocomplete="off"
論理属性で、ユーザーがボタンを操作することを抑止します。この属性が設定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる {{HTMLElement("fieldset")}} 要素などにも disabled 属性が指定されていないのであれば、この子要素であるボタンは使用可能のままであるということです。
Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を動的に無効化した状態を維持します。この機能は {{htmlattrxref("autocomplete","button")}} 属性で制御できます。
<form>
id
application/x-www-form-urlencoded
multipart/form-data
file
text/plain
この属性が指定されている場合、button 属性が紐付けられた form 要素 (form owner)の {{htmlattrxref("enctype","form")}} 属性より、ボタンのそれが優先されます。
post
get
action
この属性が指定された場合、これはボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。
name
_self
_blank
_parent
_top
value
submit
type
reset
<input type="reset">
button
<button> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単に整形できます。 {{HTMLElement("input")}} が value 属性に文字列を設定することしかできないのに対し、内部に HTML コンテンツを追加できますし (<em>、 <strong> や <img> さえも)、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 疑似要素を使用することもできます。
<em>
<strong>
<img>
ボタンがサーバーにデータを送信するためのものでない場合は、 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 で修正されました。
<button type="submit" name="myButton" value="foo">Click me</button>
POST
myButton=foo
myButton=Click me
Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を動的に無効化した状態を維持します。 {{htmlattrxref("autocomplete","button")}} 属性の値を off にすると、この機能が無効になります。 {{bug(654072)}} をご覧ください。
off
Android 版 Firefox のバージョン35より前では、すべてのボタンに既定でグラデーションの {{cssxref("background-image")}} を設定していました ({{bug(763671)}} をご覧ください)。これは background-image: none を使用して無効化できます。
background-image: none
<button name="button">クリックしてね</button>
{{ EmbedLiveSample('Example', 200, 64) }}
アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名は読み上げソフトのような支援技術で文書を解析し、アクセシビリティツリーを生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。
アイコンボタンにアクセシブル名を与えるには、 <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 ピクセル以上の操作のための大きさが推奨されています。
たくさんの対話型コンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。
間隔は {{cssxref("margin")}} などの CSS プロパティを使用して作成することができます。
Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 button{{cssxref("::-moz-focus-inner")}} { } を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。
button{{cssxref("::-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="button"
type="submit"
tabindex
{{Compat("html.elements.button")}}
フォーム作成に用いるその他の要素: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}