<button>
<button>
はクリックできるボタンを配置するHTMLタグである。
構文
<button>
<!-- phrasing content -->
</button>
属性
<button>
タグには次の属性を指定できる。
class
-
CSSのクラスを指定する。空白で区切って複数のクラスを指定することができる。
<button class="button primary">button</button>
- data-*
- カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScriptから独自の属性を読み取るための仕組みである。
- name
- 名前を指定します。
- value
- 値を指定します。
- type
-
ボタンの種類を指定します。
値 |
意味 |
button |
通常のボタン |
submit |
実行ボタン |
reset |
リセットボタン |
- disabled
- 指定できる値は「disabled」だけである。disabled属性を指定したbutton要素は、ユーザからの入力を受付けない。ブラウザによっては、入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。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
- 要素に関するアドバイザリー情報を指定する。
- lang
- ボタンのラベルが何語で記述されているかを指定する。
lang属性
値 |
説明 |
ja |
日本語 |
ja-JP |
日本語(日本) |
en |
英語 |
en-UK |
英語(イギリス) |
en-US |
英語(アメリカ) |
th |
タイ語 |
th-TH |
タイ語(タイ) |
- dir
- 方向
- onclick
- 要素をクリックしたときに実行されるスクリプト
- ondblclick
- 要素をダブルクリックしたときに実行されるスクリプト
- onmousedown
- 要素内でマウスのボタンを押下したときに実行されるスクリプト
- onmouseup
- 要素内でマウスのボタンを離したときに実行されるスクリプト
- onmouseover
- 要素外から要素内へマウスカーソルを移動したときに実行されるスクリプト
- onmousemove
- 要素内でマウスカーソルを移動したときに実行されるスクリプト
- onmouseout
- 要素内から要素外へマウスカーソルを移動したときに実行されるスクリプト
- onkeypress
- キーを押下して離したときに実行されるスクリプト
- onkeydown
- キーを押下したときに実行されるスクリプト
- onkeyup
- キーを離したときに実行されるスクリプト
内容
buttonタグの内容には、対話型コンテンツ以外の記述コンテンツを含むことができる。具体的には次の要素である。
- テキスト
- <abbr>
- <audio>
- <b>
- <bdo>
- <br>
- <canvas>
- <cite>
- <code>
- <data>
- <datalist>
- <dfn>
- <em>
- <embed>
- <i>
<img>
- <kbd>
- <label>
- <math>
<meter>
<noscript>
- <object>
- <output>
- <picture>
<progress>
<q>
- <ruby>
- <samp>
<script>
<select>
- <small>
- <span>
- <strong>
- <sub>
<sup>
- <svg>
- <time>
- <var>
- <video>
- <wbr>
例
HTMLタグ
<button>
の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<button title="ポチっとな" type="button">自爆ボタン</button>
<button type="button" disabled="disabled">無効なボタン</button>
JavaScript
JavaScriptからは HTMLButtonElement インタフェースを通じて button 要素へアクセスできる。
Figure 1. HTMLButtonElement interface
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
HTMLタグ
参考文献
WHATWG (2021) "The button element" HTML Living Standard