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