<button></button>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ(ただし、インタラクティブ・コンテンツは含められない)

button要素は、3タイプのボタン(送信ボタン、リセットボタン、汎用ボタン)を作成します。


<button type="button">ボタンの内容</button>

<button type="submit" name="example" value="ボタン">ボタンの内容</button>

属性
任意属性
type="" ボタンのタイプ submit 送信ボタン (初期値)
reset リセットボタン
button 汎用ボタン
menu [5.1]メニュー表示ボタン
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 ボタンがクリックされた時に送信される値
disabled 部品の無効化 disabled 値は省略可能
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
menu="" [5.1]メニューとの関連付け ID名 関連付けるmenu要素に指定したID名
任意属性(form要素の設定を上書き(type="submit"の場合に使用可))
formaction="" [+]送信先の指定 form要素のaction属性の設定を上書き
formmethod="" [+]HTTPメソッド form要素のmethod属性の設定を上書き
formenctype="" [+]送信時のデータ形式 form要素のenctype属性の設定を上書き
formtarget="" [+]送信結果の表示方法 form要素のtarget属性の設定を上書き
formnovalidate [+]妥当性をチェックしない form要素のnovalidate属性の代わりに使用 (値は省略可能)
  • formaction属性formmethod属性formenctype属性formtarget属性formnovalidate属性は、type="submit" 用の属性となります。他のボタンタイプの場合は、これらの属性は指定できません。
  • type="menu" の場合は、menu属性の指定が必須となります。他のボタンタイプの場合はmenu属性は指定できません。

button要素の内容について

input要素のボタンとは異なり、button要素では内容を持つことができます。(button要素の内容が、ボタン上に表示されることになります)

次の例では、送信するがボタン上に表示されます。

<button type="submit">送信する</button>

また、画像をボタンのラベルとして表示することも可能です。

<button type="submit"><img src="submit.gif" alt="送信する"></button>

type属性について

type属性は、ボタンのタイプを指定します。指定できる値は次の3つです。

submit
フォームの送信ボタンを作成します。この送信ボタンは、input要素の送信ボタンと同じ機能を持ちます。(初期値)
reset
フォームのリセットボタンを作成します。このリセットボタンは、input要素のリセットボタンと同じ機能を持ちます。
button
汎用的なボタンを作成します。この汎用ボタンは、input要素の汎用ボタンと同じ機能を持ちます。
menu
ポップアップメニューを表示するためのボタンを作成します。type属性にこの値を指定する場合は、同時にmenu属性を指定しておく必要があります。

name属性について

name属性は、フォーム部品を識別するための名前を指定します。

この属性の値は、value属性の値とセットで送信されることになります(type="submit" の場合)。

<button type="submit" name="submit1" value="1">送信する1</button>
<button type="submit" name="submit2" value="1">送信する2</button>

上記のように、複数の送信ボタンを配置する場合などに使用します。(クリックされたボタンにより処理を振分ける場合など)

value属性について

value属性は、送信される値を指定します。

この属性の値は、そのボタンがクリックされた時に送信されることになります(type="submit" の場合)。

disabled属性について

disabled属性は、フォーム部品の無効化を指定します。

この属性が指定されたボタンは、クリックすることができなくなります。

<button type="submit" disabled>送信する</button>

form属性について

form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

  • この属性は、部品をform要素の外に配置する場合に使用します。(form要素の中に配置する場合は不要です)
<form method="post" action="example.cgi" id="example">
<p>お名前:<input type="text" name="name"></p>
</form>

<p><button type="submit" form="example">送信する</button>
<button type="reset" form="example">リセット</button></p>
  • ただし、この機能に対応していないブラウザもあります。

autofocus属性について

autofocus属性は、フォーム部品の自動フォーカスを指定します。

この属性が指定された部品は、文書の読み込み時に自動的にフォーカスされることになります。

  • この属性は、1つの文書に1つだけ指定することができます。
<button type="submit" autofocus>送信する</button>

menu属性について

menu属性は、そのボタンをどのポップアップメニューと関連付けるかを指定します。この属性の値には、対応するmenu要素に指定したID名を記述します。

  • この属性は、ボタンのタイプが type="menu" の場合に指定することができます。
<button type="menu" menu="example">メニューを表示</button>

<menu type="context" id="example">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>

上記のように指定すると、ボタンのクリックでポップアップメニューが表示されるようになります。

  • 2016年12月現在、この機能に対応しているブラウザはまだないようです。

form要素の設定を上書きする属性

formaction属性formmethod属性formenctype属性formtarget属性formnovalidate属性は、form要素の設定内容を上書きします(type="submit" の場合)。

  • これらの属性は、複数の送信ボタンを配置して処理を振分ける場合などに使用します。
formaction属性

form要素のaction属性の設定を上書きします。次の例では、example2.cgiが優先されることになります。

<form method="post" action="example1.cgi">

<button type="submit" formaction="example2.cgi">送信する</button>

</form>
formmethod属性

form要素のmethod属性の設定を上書きします。次の例では、getが優先されることになります。

<form method="post" action="example.cgi">

<button type="submit" formmethod="get">送信する</button>

</form>
formenctype属性

form要素のenctype属性の設定を上書きします。次の例では、application/x-www-form-urlencodedが優先されることになります。

<form method="post" action="example.cgi" enctype="multipart/form-data">

<button type="submit" formenctype="application/x-www-form-urlencoded">送信する</button>

</form>
formtarget属性

form要素のtarget属性の設定を上書きします。次の例では、_selfが優先されることになります。

<form method="post" action="example.cgi" target="_top">

<button type="submit" formtarget="_self">送信する</button>

</form>
formnovalidate属性

妥当性のチェックを行わないことを指定します(form要素のnovalidate属性の代わりに使用します)。次の例では、妥当性のチェックが行われないことになります。

<form method="post" action="example.cgi">

<button type="submit" formnovalidate>送信する</button>

</form>
HTML5における変更点
  • form属性、autofocus属性、formaction属性、formmethod属性、formenctype属性、formtarget属性、formnovalidate属性が追加されました。
HTML 5.1における変更点
  • type属性の値に menu が追加されました。
  • menu属性が追加されました。

使用例

送信ボタンとリセットボタンを作成した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="button.html">

<p>お名前:<input type="text" name="name"></p>

<p><button type="submit">送信する</button>
<button type="reset">リセット</button></p>

</form>

表示例

お名前:

form属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="button.html" id="example">
<p>お名前:<input type="text" name="name"></p>
</form>

<p><button type="submit" form="example">送信する</button>
<button type="reset" form="example">リセット</button></p>

表示例

お名前:

  • 未対応のブラウザでは機能しません。
menu属性を指定した例

<p><button type="menu" menu="popup">メニューを表示</button></p>

<menu type="context" id="popup">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>

表示例

  • 未対応のブラウザでは機能しません。
汎用ボタンを画像で作成した例

<p><button type="button" onclick="alert('アラートを表示します')"><img src="mark.gif" alt="アラート" width="47" height="42"></button></p>

表示例

disabled属性を指定した例

<p><button type="button" onclick="alert('アラートを表示します')" disabled><img src="mark.gif" alt="アラート" width="47" height="42"></button></p>

表示例