button 要素ボタンを表す
button 要素はボタンを表します。button 要素でマークアップすることで、内包するテキストや画像などをボタンとして使用することができます。
button 要素の仕様
- カテゴリ
- コンテンツモデル
-
ただし、インタラクティブ・コンテンツを子孫に持つことはできません（例えば button 要素を入れ子にしたり、a 要素を子孫にすることはできません）。
- この要素を使用できる文脈
フレージング・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
button 要素に type 属性を指定することで この要素によってレンダリングされたボタンを操作した際の挙動を指定することができます。type 属性値として指定できる値と、その動作は下記の通りです。
| 属性値 | ボタンの状態 | 概要 |
|---|---|---|
| submit | 送信ボタン（初期値） | フォームを送信 （サブミット） します。 |
| reset | リセットボタン | フォームに入力された内容をリセットします。 |
| button | 何もしません。 | onclick 属性などと組み合わせてスクリプトを実行するボタンなどに利用できます。 |
form 属性
form 属性は、label 要素の for 属性のように、button 要素をフォームと結びつけることができます。結びつけたい form 要素に付与した id 属性値を form 属性に指定することで、該当する form 要素の外に button 要素がある場合でも、操作が可能になります。
disabled 属性
disabled 属性はボタンを無効にします。
form の属性値を上書きする属性
formaction 属性
formaction 属性を指定することで、form の action 属性値をこの値で上書きすることができます。
formenctype 属性
formenctype 属性を指定することで、form の enctype 属性値をこの値で上書きすることができます。
formmethod 属性
formmethod 属性を指定することで、form の method 属性値をこの値で上書きすることができます。
formnovalidate 属性
formnovalidate 属性を指定することで、form の novalidate 属性値をこの値で上書きすることができます。
formtarget 属性
formtarget 属性を指定することで、form の target 属性値をこの値で上書きすることができます。
button 要素のサンプルソース
<button type="button" onclick="[script]"> ボタンを押すとヒントページを表示 </button>
<button type="submit"> <img src="/img/submit.png" alt="送信ボタン" /> </button>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |