HTML Tag Reference

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 属性値をこの値で上書きすることができます。

ポップオーバーに関する属性

popovertarget 属性

トグル、表示、または非表示のターゲットとするポップオーバー要素を指定します。

popovertargetaction 属性

対象のポップオーバー要素がトグルされるか、表示されるか、非表示にされるか、ボタンの役割を示します。

属性値 概要
hide 表示されているポップオーバー要素を非表示にします。ターゲットとなるポップオーバー要素がすでに非表示の場合は何もしません。
show 非表示のポップオーバー要素を表示します。ターゲットとなるポップオーバー要素がすでに表示されている場合は何もしません。
toggle 既定値。ポップオーバー要素の表示・非表示を切り替える（トグルする）ボタンとします。

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 ○

関連する要素

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。