button要素

button要素とは

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

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

利用例

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

<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属性の利用例は、以下のとおりです。

<button disabled>送信</button>

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

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

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属性の利用例は、以下のとおりです。

<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属性の利用例は、以下のとおりです。

<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には、以下の値が使えます。

formmethod属性の利用例

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

<form method="post" action="test.php">
<input type="text" name="test">
<button type="submit" formmethod="get">送信</button>
</form>

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

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属性の利用例は、以下のとおりです。

<form method="post" action="test.php" target="_blank">
<input type="text" name="test">
<button type="submit" formtarget="_self">送信</button>
</form>

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

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

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

nameとvalue属性の利用例

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

<button type="submit" name="test" value="Yes">Yes</button>

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

type属性の利用例

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

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

<form method="post" action="test.php">
<input type="text" name="test">
<button type="reset">リセット</button>
</form>

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

次は、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があったとします。

<button type="button">このボタンを<span class="test">クリック!></span></button>

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

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

<button type="button" value="10">クリック!</button>

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

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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