<button>
<button> は HTML の要素で、マウス、キーボード、指、音声コマンド、その他の支援技術で起動することができる操作可能要素です。起動すると、フォームを送信したりダイアログを開いたりといった操作を実行します。
既定では、HTML のボタンはユーザーエージェントが実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
| disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| form は HTML の属性で、フォーム関連要素を、同じ文書内の form 要素に関連付けます。この属性は、button、fieldset、input、object、output、select、textarea の各要素に適用されます。 | 9 | 16 | 4 | 5.1 | 18 | 5 |
formaction | 9 | 12 | 4 | 5.1 | 18 | 5 |
formenctype | 9 | 12 | 4 | 5.1 | 18 | 5 |
formmethod | 9 | 12 | 4 | 5.1 | 18 | 5 |
formnovalidate | 9 | 12 | 4 | 5.1 | 18 | 5 |
formtarget | 9 | 12 | 4 | 5.1 | 18 | 5 |
name | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
type | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
value | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| HTMLButtonElement インターフェイスは、（通常の HTMLElement から継承によって利用できるものに加えて）button 要素を操作するためのプロパティやメソッドを提供します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLButtonElement.disabled プロパティはこのコントロールが無効であるかどうか、すなわちクリックを受け付けない状態であるかどうかを示します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| form は HTMLButtonElement インターフェイスの読み取り専用プロパティで、この button を所有する HTMLFormElement オブジェクトを返し、このボタンがどのフォームにも所有されていない場合は null を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| formAction は HTMLButtonElement インターフェイスのプロパティで、このコントロールを含むフォームが送信された際にサーバー上で実行されるプログラムの URL です。これは、この の formaction 属性の値を反映します。 | 9 | 12 | 4 | 5.1 | 18 | 5 |
| formEnctype は HTMLButtonElement インターフェイスのプロパティで、このフォームが送信される場合のサーバーに送信されるコンテンツの MIME_typeです。これは、この の formenctype 属性の値を反映します。 | 9 | 12 | 4 | 5.1 | 18 | 5 |
| formMethod は HTMLButtonElement インターフェイスのプロパティで、この button 要素がこのフォーム (form) を送信するコントロールである場合に、フォームを送信するコントロールである場合、送信に使用される HTTP メソッドです。これは、この の formmethod 属性の値を反映します。 | 9 | 12 | 4 | 5.1 | 18 | 5 |
| formNoValidate は HTMLButtonElement インターフェイスのプロパティで、form がこの button から送信されたとき、制約検証を回避するかどうかを示す論理値です。この 要素の formnovalidate 属性を反映します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| formTarget は HTMLButtonElement インターフェイスのプロパティで、送信される form のレスポンスが表示されるタブ、ウィンドウ、iframe です。これは、この button 要素の formtarget 属性の値を反映します。 | 9 | 12 | 4 | 5.1 | 18 | 5 |
| HTMLButtonElement.labels は読み取り専用プロパティで、この button 要素に関連付けられた label 要素を NodeList で返します。 | 6 | 18 | 56 | 5.1 | 18 | 5 |
| name は HTMLButtonElement インターフェイスのプロパティで、この button 要素の名前を示します。これは、この要素の name 属性を反映します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| type は HTMLButtonElement インターフェイスのメソッドで、この button 要素の動作の種類を示す文字列です。 | 1 | 12 | 1 | 3 | 18 | 1 |
| value は HTMLButtonElement インターフェイスのプロパティで、この button 要素の現在の値を文字列で表します。値が設定されていない場合は空文字列になります。これはこの要素の value 属性を反映します。 | 1 | 12 | 1 | 3 | 18 | 1 |
- Firefox 56 では、`formAction` プロパティが、関連するボタンがフォーム送信に使用されている場合に、仕様に従って正しいフォーム送信 URL を返すように実装が更新されました (バグ 1366361)。
基本構文
<button type="button">Standard button</button>
<button type="submit">Send</button>
<button type="reset">Reset</button>
<button disabled>Invalid button</button>ライブデモ
実務での使いどころ
-
<button> の活用
<button> は HTML の要素で、マウス、キーボード、指、音声コマンド、その他の支援技術で起動することができる操作可能要素です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。