<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
要素がフォーカスを失ったときに実行されるスクリプト
id
要素を一意に識別する識別子
style
CSSのプロパティを指定する。セミコロンで区切って複数のプロパティを指定することもできる。
title
要素に関するアドバイザリー情報を指定する。
lang
言語
dir
方向
onclick
要素をクリックしたときに実行されるスクリプト
ondblclick
要素をダブルクリックしたときに実行されるスクリプト
onmousedown
要素内でマウスのボタンを押下したときに実行されるスクリプト
onmouseup
要素内でマウスのボタンを離したときに実行されるスクリプト
onmouseover
要素外から要素内へマウスカーソルを移動したときに実行されるスクリプト
onmousemove
要素内でマウスカーソルを移動したときに実行されるスクリプト
onmouseout
要素内から要素外へマウスカーソルを移動したときに実行されるスクリプト
onkeypress
キーを押下して離したときに実行されるスクリプト
onkeydown
キーを押下したときに実行されるスクリプト
onkeyup
キーを離したときに実行されるスクリプト

内容

buttonタグの内容には、対話型コンテンツ以外の記述コンテンツを含むことができる。具体的には次の要素である。

例

HTMLタグ <button> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。 

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

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

HTMLタグ