button要素

Webページでは、ボタンを作成することができます。

本ページでは、button要素について説明します。

button要素とは

button要素は、フォームコントロールの一種です。ボタンが作成できて、クリックするとサーバーにデータを送信したり、データをリセットしたりできます。

buttonの定義は、以下のとおりです。

【buttonの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ対話型コンテンツ、リスト、ラベル付け、サブミット、autocapitalize属性を継承する要素、フォーム関連要素、認知可能コンテンツ
可能な親要素 フレージングコンテンツを包含できる要素
可能なコンテンツ フレージングコンテンツ
対話型コンテンツやtabindex属性が指定された小孫を除く。
タグの省略 不可
DOMインターフェース HTMLButtonElement

利用例

以下は、buttonを使ったHTMLの例です。

【buttonの利用例】
<form method="post" action="test.php">
<input name="test">
<button type="submit">送信</button>
</form>

上記により、以下のように表示されます。

ブラウザの画面で、テキスト入力欄と送信ボタンが表示されています。

送信ボタンをクリックすると、name="test"で入力した値が、test=値でtest.phpに送信されます。test.phpでは、データを処理するプログラムが必要です。

属性

グローバル属性と、以下が使えます。

disabled
クリックができないようになります。
form
formのIDを指定して、form要素と関連付けします。
formaction
データ送信先のURLを指定します。formのaction属性より優先されます。
formenctype
データを送信する時のエンコーディングタイプを指定します。formのenctype属性より優先されます。
formmethod
データを送信する方法(メソッド)を指定します。formのmethod属性より優先されます。
formnovalidate
内容を検証しないようにします。例えば、入力が必須のテキスト入力欄だった場合でも、入力しなくてもデータを送信可能になります。formのnovalidate属性より優先されます。
formtarget
サーバーにデータを送信した後の画面(例えば、受付完了画面など)を表示する、タブやウィンドウなどを指定します。formのtarget属性より優先されます。
name
名前です。HTML内で一意である必要があります。データ送信時に、名前=データの形で送信されます。名前がないとデータが送信されません。
type
ボタンのタイプを指定します。

value
ボタンの値です。nameとvalueが対となって(name=valueの形で)サーバーにデータが送信されます。

次からは、各属性の利用例を示します。

disabled属性の利用例

disabled属性の利用例は、以下のとおりです。

【disabled属性の利用例】
<button disabled>送信</button>

上記は、以下のように表示されます。

ブラウザの画面で、ボタンが薄く表示されています。

通常より薄く表示されていて、クリックできないことがわかるようになっています。

form属性の利用例

form属性の利用例は、以下のとおりです。

【form属性の利用例】
<form method="post" action="test.php" id="test">
<input type="text" name="test">
</form>
<button type="submit" form="test">送信</button>

buttonはform要素の外にありますが、赤字のようにform要素のIDで指定した名前と、form属性で指定した値が一致していると、指定したform要素のactionやmethodで動作します。

formaction属性の利用例

formaction属性の利用例は、以下のとおりです。

【formaction属性の利用例】
<form method="post" action="test.php">
<input type="text" name="test">
<button type="submit" formaction="test2.php">送信</button>
</form>

上記により、form要素で指定したtest.phpへの送信より優先して、test2.phpへ送信します。

formenctype属性の利用例

formenctype属性の利用例は、以下のとおりです。

【formenctype属性の利用例】
<form method="post" action="test.php" enctype="multipart/form-data">
<input type="text" name="test">
<button type="submit" formenctype="application/x-www-form-urlencoded">送信</button>
</form>

上記により、form要素で指定したエンコーディングタイプよりformenctype属性の方が優先されます。

formenctypeには、以下の値が使えます。

【formenctypeで使える値】
説明
application/x-www-form-urlencoded データをURLエンコードします。デフォルトです。
multipart/form-data inputでtypeがfileの時に使います。
text/plain エンコードせずにテキスト形式で送信します。

formmethod属性の利用例

formmethod属性の利用例は、以下のとおりです。

【formmethod属性の利用例】
<form method="post" action="test.php">
<input type="text" name="test">
<button type="submit" formmethod="get">送信</button>
</form>

上記により、form要素で指定したメソッドより優先されます。

formnovalidate属性の利用例

formnovalidate属性の利用例は、以下のとおりです。

【formnovalidate属性の利用例】
<form method="post" action="test.php">
<input type="url" name="test">
<button type="submit">送信1</button>
<button type="submit" formnovalidate>送信2</button>
</form>

inputのtypeがurlの場合、入力文字の検証がされます。

「送信1」ボタンはこの検証を行うため、日本語などが入力された場合は「URLを入力してください。」などと表示されて、データは送信されません。

「送信2」ボタンはこの検証を行わないため、日本語などが入力された場合でもデータが送信されます。

formtarget属性の利用例

formtarget属性の利用例は、以下のとおりです。

【formtarget属性の利用例】
<form method="post" action="test.php" target="_blank">
<input type="text" name="test">
<button type="submit" formtarget="_self">送信</button>
</form>

form要素では、データ送信後の画面は別タブで表示するようにtarget指定していますが、_selfで上書きしています。

formtargetでは、以下の値が使えます。

【formtargetで使える値】
説明
_self 現在の表示タブ(デフォルト)
_blank 新しいタブ
_parent 現在のタブを開く元となったタブ
_top 現在のタブを開く元となったタブをたどった一番元のタブ
名前 iframeのnameで指定した名前

タブは、ブラウザの設定によっては新しいウィンドウで開きます。

nameとvalue属性の利用例

nameとvalue属性の利用例は、以下のとおりです。

【nameとvalue属性の利用例】
<button type="submit" name="test" value="Yes">Yes</button>

上記により、データはtest=Yesで送信されます。

type属性の利用例

typeは、以下の値が使えます。

【typeで使える値】
説明
submit サーバーにデータを送信します。デフォルトです。
reset フォーム内のコントロールを、すべて初期値に戻します。
button このままでは、特になにもしません。クリックした時、JavaScriptを動作させたりすることができます。

これまで説明した、submit以外のresetとbuttonの利用例を示します。まずは、resetです。

【resetの利用例】
<form method="post" action="test.php">
<input type="text" name="test">
<button type="reset">リセット</button>
</form>

上記により、リセットボタンが表示されて、クリックするとinputに入力したテキストは消えます。また、inputにvalueで初期値が入っていた場合は、初期値に戻ります。

次は、buttonです。

【buttonの利用例】
<button type="button" id="test1">アラート</button>

<script>
const x = document.querySelector("#test1");
x.addEventListener("click", function(){alert("テストです。");});
</script>

上記は、以下のように表示されます。

ボタンをクリックすると、アラートで「テストです。」と表示されます。

input要素との違い

input要素でも、typeでsubmit、reset、buttonが使えます。これらは、button要素と主な役割は、同じです。

大きな違いは、inputが空要素(終了タグがない)なのに対して、button要素がコンテンツを持つことができる点です。

このため、button要素の場合は、以下のメリットがあります。

  • CSSで見た目を変更しやすい。
  • inputは、valueで指定した値が表示されてボタンになります。buttonは、valueで指定した値と別のテキストでボタンを表示できます。

例えば、以下のHTMLがあったとします。

【CSSで見た目を変更する】
<button type="button">このボタンを<span class="test">クリック!></span></button>

クラスtestにCSSでcolor:red;を宣言すると、以下のように「クリック!」部分だけ赤字にすることができます。

また、以下のHTMLがあったとします。

【valueと表示を変える】
<button type="button" value="10">クリック!</button>

値は10ですが、以下のように画面上は「クリック!」と表示されます。

inputでは、valueで指定した値がそのまま画面上に表示されます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
button
disabled
form ×
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value
【スマートフォン】
項目 Sa An Op Ch Fx Sm
button
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る