button要素
Webページでは、ボタンを作成することができます。
本ページでは、button要素について説明します。
button要素とは
button要素は、フォームコントロールの一種です。ボタンが作成できて、クリックするとサーバーにデータを送信したり、データをリセットしたりできます。
buttonの定義は、以下のとおりです。
コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、対話型コンテンツ、リスト、ラベル付け、サブミット、autocapitalize属性を継承する要素、フォーム関連要素、認知可能コンテンツ |
---|---|
可能な親要素 | フレージングコンテンツを包含できる要素 |
可能なコンテンツ | フレージングコンテンツ ※対話型コンテンツやtabindex属性が指定された小孫を除く。 |
タグの省略 | 不可 |
DOMインターフェース | HTMLButtonElement |
利用例
以下は、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には、以下の値が使えます。
値 | 説明 |
---|---|
application/x-www-form-urlencoded | データをURLエンコードします。デフォルトです。 |
multipart/form-data | inputでtypeがfileの時に使います。 |
text/plain | エンコードせずにテキスト形式で送信します。 |
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では、以下の値が使えます。
値 | 説明 |
---|---|
_self | 現在の表示タブ(デフォルト) |
_blank | 新しいタブ |
_parent | 現在のタブを開く元となったタブ |
_top | 現在のタブを開く元となったタブをたどった一番元のタブ |
名前 | iframeのnameで指定した名前 |
タブは、ブラウザの設定によっては新しいウィンドウで開きます。
nameとvalue属性の利用例
nameとvalue属性の利用例は、以下のとおりです。
<button type="submit" name="test" value="Yes">Yes</button>
上記により、データはtest=Yesで送信されます。
type属性の利用例
typeは、以下の値が使えます。
値 | 説明 |
---|---|
submit | サーバーにデータを送信します。デフォルトです。 |
reset | フォーム内のコントロールを、すべて初期値に戻します。 |
button | このままでは、特になにもしません。クリックした時、JavaScriptを動作させたりすることができます。 |
これまで説明した、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 | 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要素(タグ)一覧」に戻る