HTML <button>

<button> はクリックできるボタンを配置するHTMLタグである。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。button 要素の終了タグは省略できない。

<button>
  <!-- phrasing content -->
</button>

<BUTTON>
  <!-- phrasing content -->
</BUTTON>

コンテンツモデル

button 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• a
• abbr
• area（マップ要素の子孫である場合）
• audio
• b
• bdi
• bdo
• br
• button
• canvas
• cite
• code
• data
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• output
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• time
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

属性

以下に示す属性を button 要素に指定できる。

class

CSSのクラスを指定する。空白で区切って複数のクラスを指定することができる。

<button class="button primary">button</button>

data-*

カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScriptから独自の属性を読み取るための仕組みである。

name

名前を指定します。

value

値を指定します。

type

ボタンの種類を指定する。type 属性を省略した場合、submit ボタンとなる。

type 属性

値	意味
button	通常のボタン
submit	実行ボタン（初期値）
reset	リセットボタン

disabled

指定できる値は「disabled」だけである。disabled属性を指定したbutton要素は、ユーザからの入力を受付けない。ブラウザによっては、入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したbutton要素の値は、サブミット時にフォームデータを送信しない。

<button type="button" disabled="disabled">無効なボタン</button>

無効なボタン

tabindex

タブインデックス

accesskey

アクセスキー

onfocus

要素がフォーカスを得たときに実行されるスクリプト

onblur

要素がフォーカスを失ったときに実行されるスクリプト

onclick

要素がクリックされたときに実行するJavaScript

ondblclick

要素がダブルクリックされたときに実行するJavaScript

onkeydown

キーを押したときに実行するJavaScript

onkeypress

キーを押して離したときに実行するJavaScript

onkeyup

キーを離したときに実行するJavaScript

onmousedown

マウスのボタンが押下されたときに実行するJavaScript

onmousemove

マウスポインタを要素内で動かしたときに実行するJavaScript

onmouseout

マウスポインタを要素内から要素外に動かしたときに実行するJavaScript

onmouseover

マウスカーソルが乗ったときに実行するJavaScript

onmouseup

マウスのボタンを押下した後で離すときに実行するJavaScript

oncontextmenu

要素上でマウスの右ボタンをクリックしたときに実行するJavaScript

id

要素を一意に識別する識別子

style

CSSのプロパティを指定する。セミコロンで区切って複数のプロパティを指定することもできる。

title

要素に関するアドバイザリー情報を指定する。

<button title="ポチっとな" type="button">自爆ボタン</button>

自爆ボタン

lang

ボタンのラベルが何語で記述されているかを指定する。

lang属性

値	説明
ja	日本語
ja-JP	日本語（日本）
en	英語
en-UK	英語（イギリス）
en-US	英語（アメリカ）
th	タイ語
th-TH	タイ語（タイ）

dir

方向

onclick

要素をクリックしたときに実行されるスクリプト

ondblclick

要素をダブルクリックしたときに実行されるスクリプト

onmousedown

要素内でマウスのボタンを押下したときに実行されるスクリプト

onmouseup

要素内でマウスのボタンを離したときに実行されるスクリプト

onmouseover

要素外から要素内へマウスカーソルを移動したときに実行されるスクリプト

onmousemove

要素内でマウスカーソルを移動したときに実行されるスクリプト

onmouseout

要素内から要素外へマウスカーソルを移動したときに実行されるスクリプト

onkeypress

キーを押下して離したときに実行されるスクリプト

onkeydown

キーを押下したときに実行されるスクリプト

onkeyup

キーを離したときに実行されるスクリプト

JavaScript

JavaScriptからは HTMLButtonElement インタフェースを通じて button 要素へアクセスできる。

HTMLButtonElement インタフェースには次に示すプロパティを持つ。

disabled

button要素にdisabled属性が指定されていればtrue、指定されていなければfalseを示す。

form

button要素が属しているform要素の HTMLFormElement インタフェースを指す。

formAction

button要素が属しているform要素のaction属性の値を示す。

formEnctype

button要素が属しているform要素のenctype属性の値を示す。

formMethod

button要素が属しているform要素のmethod属性の値を示す。

formNoValidate

button要素のformnovalidate属性の値を示す。

formTarget

button要素が属しているform要素のtarget属性の値を示す。

name

button要素のname属性の値を示す。

type

button要素のtype属性の値を示す。

value

button要素のvalue属性の値を示す。

willValidate

フォーム送信時にその要素が検証される場合はtrueを、そうでない場合はfalseを返す。

validity

以下の属性を持つオブジェクト。

validity

プロパティ	説明
valueMissing	コントロールが欠落している。
typeMismatch	型の不一致が発生している。
patternMismatch	パターンの不一致が発生している。
tooLong	コントロールが長すぎる。
tooShort	コントロールが短すぎる。
rangeUnderflow	アンダーフローが発生している。
rangeOverflow	オーバーフローが発生している。
stepMismatch	ステップの不一致が発生している。
badInput	入力値が悪い。
customError	カスタムエラー
valid	他の条件に当てはまらない

validationMessage

要素の有効性をチェックした場合に、ユーザーに表示されるエラーメッセージを返す。

labels

要素のラベルのリスト

参考文献

Web Hypertext Application Technology Working Group (2023) "The button element" HTML Living Standard