HTML5タグ虎の巻

buttonタグ

buttonは、ボタンを作成するタグです。

解説

buttonタグでボタンを使用すると、画像やテキストをボタンにすることができます。
type属性で指定する事により「通常ボタン」「サブミットボタン」「リセットボタン」のいずれかの動作のボタンになります。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
フレージング・コンテンツ
※インタラクティブ・コンテンツに属するタグは除く

属性

buttonタグには以下の属性が指定できます。

【属性】
属性説明
typeボタンの種類を指定する
 ・submit:サブミットボタン(デフォルト)
 ・reset:リセットボタン
 ・button:汎用ボタン
(例)type="button"
valueボタンの値を指定する
(例)value="btn1"
formサブミットするフォームIDを指定する
(例)form="fm1"
formactionサブミット先を指定する
(例)formaction="hoge.php"
formenctypeデータ形式を指定する
(例)formenctype="application/x-www-form-urlencoded"
formmethod送信方法を指定する
 ・get:GET形式(デフォルト)
 ・post:POST形式
(例)formmethod="post"
formnovalidate
formtarget送信先のターゲットを指定する
 ・_blank:新規ターゲット
 ・_top:最上階フレーム
 ・_parent:親フレーム
 ・_self:自フレーム
 ・任意名:任意に付けたターゲットフレーム
(例)formtarget="_blank"

formaction、formenctype、formmethod、formnovalidate、formtarget は
 type="submit"の場合のみ指定できます。

【共通属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="sample"
name要素に名前を指定する
(例)name="txt1"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーでの移動順を指定する
(例)tabindex="3"
autofocus初期フォーカスを設定する
(例)autofocus="true"
disabled非活性にする
(例)disabled="true"

サンプル

サブミットボタン(type="submit")を作成する

<button type="submit" form="fm1" formaction="hoge.php" >送信</button>
<form id="fm1">
  <input type="text" name="txt1" value="aaa">
</form>

リセットボタン(type="reset")を作成する

<button type="reset" form="fm1">リセット</button>

通常ボタン(type="button")を作成する

<button type="button" onclick="alert('押されました');">ボタン</button>

画像(gazo.png)をボタンにする

<button type="button" onclick="alert('押されました');">
  <img src="gazo.png" alt="ねこ">
</button>

備考

  • ボタンは、「input type="button"」タグで作成してもOKです。
  • buttonタグを使用すると、ボタンに表示する文字をbuttonタグの要素として指定するため、inputタグを使用するよりも柔軟にスタイルなどを適用することが可能です。
  • 属性にnameとvalueを指定すると、submit先でどのボタンが押されたかの判断に使うことができます。

関連項目