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"
id	IDを指定する（例）id="foo"
style	スタイルを指定する（例）style="sample"
name	要素に名前を指定する（例）name="txt1"
title	ツールチップを指定する（例）title="補足情報です"
tabindex	Tabキーでの移動順を指定する（例）tabindex="3"
autofocus	初期フォーカスを設定する（例）autofocus="true"
disabled	非活性にする（例）disabled="true"

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

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

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

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

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