<button> - ボタン

• トップ
• HTMLリファレンス
• <button>

• 概要
• 説明
• 属性
  • 共通属性
  • 固有属性
  • フォーム
  • データバインド関連
• 使用例
  • 基本的な使用例
  • JavaScriptと組み合わせる例
  • ポップオーバー(popover)
  • コマンド(command)
  • カスタムイベント(--my-event)
• リンク

概要

形式

<button>～</button>

サポート

https://caniuse.com/mdn-html_elements_button

カテゴリ

フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リステッド, ラベラブル, サブミッタブル, リアソシエイタブル(HTML 5.2のみ) な フォーム関連要素
パルパブルコンテンツ

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

フレージングコンテンツ (ただし、インタラクティブコンテンツ を子孫に持つことはできない)

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性
command
commandfor
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
popovertarget
popovertargetaction
type
value

説明

ボタンを表示します。<button>～</button> で囲まれた部分がボタン上に表示されます。ボタンに表示される部分に HTML を指定することも可能です。

type=submit を指定すると、サブミットボタンとして機能します。

フォーム関連の属性は、サブミットボタンを複数用意し、押すボタンによってフォームパラメータ(action, enctype, method, novalidate, target)を変更する際に有用です。

属性

共通属性

グローバル属性

詳細は グローバル属性 を参照してください。

固有属性

type=type

LS/H4/e4/Ch/Fx/Sa/Op/N6

ボタンの種別を指定します。省略した場合は type="submit" とみなされますが、Internet Explorer 6 など古いブラウザでは type="button" とみなされるものもあります。

• button : 通常のボタン。
• submit : 実行ボタン(規定値)。
• reset : リセットボタン。
• menu : メニュー表示ボタン(HTML5.1～)

name=name

LS/H4/e4/Ch/Fx/Sa/Op/N6

名前を指定します。

value=value

LS/H4/e4/Ch/Fx/Sa/Op

ボタンに割り当てられる値を指定します。

disabled

LS/H4/e4/Ch/Fx/Sa/Op/N6

この属性を指定すると、ボタンを押した時の動作が無効になります。

autofocus

LS/H5/e/Ch/Fx/Sa/Op

ページを開いた際に、自動的にフォーカスをあてます。

popovertarget=id

LS/Ch/Ed/Sa

ポップオーバーターゲットのIDを指定します。詳細は popover を参照してください。

popovertargetaction=action

LS/Ch/Ed/Sa

ポップオーバーターゲットに対するアクションを指定します。詳細は popover を参照してください。

menu=menu

[非推奨] H5-5

メニューのIDを指定します。HTML5.1 で追加されましたが、HTML 5.2 で廃止されました。

フォーム

form=id

LS/H5/Ch/Fx/Sa/Op

関連付けたい form要素のidを指定します。

formaction=url

LS/H5/e/Ch/Fx/Sa/Op

フォーム送信先のURLを指定します。

formenctype=value

LS/H5/e/Ch/Fx/Sa/Op

フォームのエンコードタイプを指定します。

formmethod=value

LS/H5/e/Ch/Fx/Sa/Op

フォームのメソッド(GET/POST/...)を指定します。

formnovalidate

LS/H5/e/Ch/Fx/Op

input要素の required属性などの入力値のバリデーションチェックを行わないことを指定します。

formtarget=value

LS/H5/e/Ch/Fx/Sa/Op

フォーム送信結果を表示するフレーム名を指定します。

command=value

LS/Chrome 135～

2025年4月の Chrome 135 でサポートされました。ボタンが押された時、commandfor で指定した要素に対して次のアクションを実行します。サポート状況は Can I use を参照してください。

• toggle-popover : ポップオーバーを開閉します。
• show-popover : ポップオーバーを開きます。
• hide-popover : ポップオーバーを閉じます。
• close : ダイアログを閉じます。
• show-modal : ダイアログをモーダルモードで開きます。
• --event : カスタムイベントを送ります。受け取り側は addEventListener("command", (e) => { ... }) で受け取ります。

commandfor=value

LS/Chrome 135～

command の対象とする要素のIDを指定します。

データバインド関連

datafld=datafld

[非推奨] e4-?

データバインド機能を用いる際の、データソースの列名を指定します。

dataformatas=format

[非推奨] e4-?

データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。

datasrc=datasrc

[非推奨] e4-?

データバインド機能を用いる際の、データソースの ID を指定します。

使用例

基本的な使用例

<button type="button" onclick="alert('Hello!')">Hello!</button>

JavaScriptと組み合わせる例

<button type="button" id="my-button">Hello!</button>
<script>
document.getElementById("my-button").addEventListener("click", (e) => {
  alert("Hello!");
});
</script>

ポップオーバー(popover)

<button popovertarget="my-popover">Toggle</button>
<button popovertarget="my-popover" popovertargetaction="toggle">Toggle</button>
<button popovertarget="my-popover" popovertargetaction="show">Show</button>
<button popovertarget="my-popover" popovertargetaction="hide">Hide</button>
<div id="my-popover" popover>Hello!</div>

コマンド(command)

<button commandfor="my-dialog" command="show-modal">showModal</button>
<dialog id="my-dialog">
  <div>Hello!</div>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

カスタムイベント(--my-event)

<button commandfor="my-target" command="--my-event">Click!</button>
<div id="my-target">Target</div>
<script>
document.getElementById("my-target").addEventListener("command", (e) => {
  alert(e.command);
});
</script>

リンク

• https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/button
• https://caniuse.com/mdn-html_elements_button