<button></button>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能自動大文字化と自動修正継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ(ただし、インタラクティブ・コンテンツ、およびtabindex属性が指定された要素は含められない)

button要素は、内容を持つボタンを表します。この要素によって、3タイプのボタン(送信ボタン、リセットボタン、汎用ボタン)を作成することができます。


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

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

属性
任意属性
type="" ボタンのタイプ submit 送信ボタン(既定値)
reset リセットボタン
button 汎用ボタン
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 ボタンがクリックされた時に送信される値
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
disabled 部品の無効化 disabled 値は省略可能
popovertarget="" [+]ポップオーバー要素との関連付け ID名 関連付けるポップオーバー要素に指定したID名
popovertargetaction="" [+]ポップオーバー要素の表示状態 toggle ポップオーバー要素を表示または非表示にする(既定値)
show ポップオーバー要素を表示する
hide ポップオーバー要素を非表示にする
任意属性(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" 用の属性となります。他のボタンタイプの場合は、これらの属性は指定できません。
  • ポップオーバー要素とは、popover属性が指定された要素のことを言います。
  • この要素に定義されていたautofocus属性は、グローバル属性として再定義されました。

popovertarget属性popovertargetaction属性の詳細については、下記のページを参考にしてください。

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要素の汎用ボタンと同じ機能を持ちます。

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" の場合)。

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>
  • 古いブラウザでは、この機能に対応していない場合があります。

disabled属性について

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

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

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

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>
  • novalidate属性が指定されていないform要素は、妥当性のチェックが有効になっています。
旧HTMLからの変更点
  • HTML5:form属性、autofocus属性、formaction属性、formmethod属性、formenctype属性、formtarget属性、formnovalidate属性が追加されました。
  • HTML5.1:type="menu" とmenu属性が追加されました。
  • HTML5.2:type="menu" とmenu属性が廃止されました。
  • HTML LS:autofocus属性がグローバル属性として再定義されました。
  • HTML LS:popovertarget属性とpopovertargetaction属性が追加されました。[2023/04/20]

使用例

送信ボタンとリセットボタンを作成した例
  • 動作確認のため、送信先として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>

表示例

お名前:

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

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

表示例

disabled属性を指定した例

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

表示例