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
- validity
- validationMessage
- labels
参考文献
Web Hypertext Application Technology Working Group (2023) "The button element" HTML Living Standard