HTMLのbuttonタグとは？使い方と主要属性をステップごとに解説

HTMLの<button>タグは、HTMLフォーム内にクリック可能なボタンを作成するために使用されます。ユーザーがフォームに入力した情報をWebサイトへ送信する際に活用され、ボタンの見た目はCSSで自由にカスタマイズできます。

---

Webページ上でフォームを作成する際には、ユーザーがフォームを送信できるように、クリック可能なボタンが必要になります。たとえば、ECサイトの注文フォームで配送先情報を入力してもらう場合、ユーザーが入力を終えた後に情報を送信するためのボタンが欠かせません。

そこで登場するのがHTMLの<button>タグです。buttonタグは、HTMLフォーム内にクリック可能なボタンを作成し、ユーザーがフォームの情報をWebサイトに送信できるようにします。

このチュートリアルでは、HTMLにおける<button>タグの使い方を解説します。さらに、カスタムボタンを作成するために使用できる属性についても取り上げ、実際のコード例を通してその動作を確認していきます。

おさらい：HTMLフォームの基本

HTMLフォームは、名前、電話番号、住所など、さまざまな種類のユーザー入力をWebページ上で収集するために使用されます。

各フォームには、ユーザーがWebサイトに情報を送信できるようにする入力要素が含まれています。たとえば、Webページの注文フォームには、ユーザーの氏名、生年月日、クレジットカード情報などを収集するためのフォーム要素が含まれていることがあります。

HTMLでは<form>タグを使用してフォームを作成します。以下は、<form>タグを使ってユーザーの名前を収集するフォームを作成するシンプルな例です。

<form>
	名前： <input type="text">
</form>

formタグには複数の<input>タグや、セレクトボックスなどの他のユーザー入力要素を含めることができます。また、フォームには<button>タグを含める必要があります。このボタンがクリックされると、ユーザーの情報がWebサイトに送信されます。

HTMLボタンの作成方法

<button>タグを使用すると、HTMLフォーム内にクリック可能なボタンを作成できます。たとえば、支払い情報を収集するフォームがある場合、フォームの末尾に<button>を配置することで、ユーザーがそのデータをサイトに送信できるようにします。

<button>タグには開始タグと終了タグが必要で、type属性の値も指定する必要があります。type属性については後述しますが、フォームに対してどの種類のボタンを表示すべきかを伝える役割を担います。

以下は、HTMLの<button>タグを使用した例です。

<button type="submit" value="Sign Up">Sign Up</button>

このボタンはWebページ上で次のように表示されます。

これでWebページにボタンが配置されたので、ユーザーは入力したフォームの情報を送信できるようになりました。

<button>タグはすべての主要ブラウザでサポートされているため、ブラウザ間の互換性を気にせずに使用できます。ただし、ブラウザによって<button>タグの扱いが異なる点には注意が必要です。たとえば、Internet Explorer 9より前のバージョンでは、<button>要素の開始タグと終了タグの間のテキストが送信されるのに対し、他のブラウザではvalue属性の内容が送信されます。

HTML buttonタグの主な属性

HTMLの<button>タグには、カスタムボタンを作成するために使用できる多数の属性が用意されています。また、<button>タグはHTML5のグローバル属性もサポートしています。ここからは、主要な<button>タグの属性について詳しく見ていきましょう。

autofocus（自動フォーカス）

autofocus属性は、Webページが読み込まれたときにボタンが自動的にフォーカスを受け取るように指定します。autofocus属性の構文は以下のとおりです。

<button type="submit" autofocus>テストボタン！</button>

disabled（無効化）

disabled属性はボタンを無効化します。つまり、ユーザーはその要素を操作できなくなります。disabled属性の構文は以下のとおりです。

<button type="submit" disabled>テストボタン！</button>

下の画像のように、ボタンはグレーアウト表示され、クリックできなくなります。

form（フォームとの関連付け）

form属性は、button要素をフォームに関連付けるために使用します。form属性の値は、関連付けたいフォームのidと一致させる必要があります。以下は、form属性を使って送信ボタンをpizzaフォームに関連付ける例です。

<form id="pizza">
	フレーバー： <input type="text" name="flavor">
</form>
<button type="submit" form="pizza">注文を送信</button>

form属性によって、ボタンはid値がpizzaのフォームに関連付けられました。これにより、ボタンをクリックすると、idがpizzaのフォームが送信されます。

formaction（送信先URL）

formactionは、ボタンから送信された情報を処理するプログラムのURLを指定します。この属性は、ボタンのtype属性がsubmitである場合にのみ使用できます。

以下は、formaction属性の使用例です。

<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">注文を送信</button>

formenctype（エンコード方式）

formenctype属性は、フォームデータをサーバーに送信する際のエンコード方法を指定します。この属性は、フォームで「method='post'」を使用している場合にのみ使うべきものです。

以下は、ボタンがクリックされたときにプレーンテキストをサーバーに送信するためにformenctype属性を使用する例です。

<button type="submit" formenctype="text/plain">注文を送信</button>

formmethod（HTTPメソッド）

formmethodは、フォームの送信にブラウザが使用するHTTPメソッドを指定します。この属性は「type='submit'」属性と併用する必要があります。

formmethod属性に指定できる値はgetとpostの2つです。情報を取得したい場合やHTTP GET処理を実行したい場合はgetを、情報を送信したい場合やHTTP POST処理を実行したい場合はpostを使用します。

formmethod属性の構文は以下のとおりです。

<button type="submit" formmethod="post">注文を送信</button>

formnovalidate（バリデーションの無効化）

formnovalidateは、フォームデータの送信時にバリデーション（検証）を行わないことを指定します。たとえば、すべてのフィールドが入力されていなくてもユーザーの入力を受け付けたい場合は、formnovalidate属性を使用します。

以下は、formnovalidateの使用例です。

<button type="submit" formnovalidate>注文を送信</button>

formtarget（表示先）

formtargetは、フォーム送信後にサーバーから返されるレスポンスの表示先を設定します。この属性に指定できる値は、_blank、_self、_parent、_top、またはiframeの名前です。

formtarget属性の構文は以下のとおりです。

<button formtarget="_blank">注文を送信</button>

name（ボタン名）

name属性は、ボタンの名前を指定します（他のすべてのフォーム要素名と重複しない一意の名前にする必要があります）。構文は以下のとおりです。

<button name="submit_order">注文を送信</button>

type（ボタンの種類）

type属性は、ボタンの種類を指定します。使用できるボタンの種類は、button、submit、resetの3つです。type属性の構文は以下のとおりです。

<button type="submit">注文を送信</button>

value（初期値）

value属性は、ボタンの初期値を指定します。value属性の構文は以下のとおりです。

<button type="submit" value="Submit Order">注文を送信</button>

まとめ

<button>タグを使用すると、HTMLフォーム内にクリック可能なボタンを作成できます。たとえば、ピザを注文できるフォームがある場合、ユーザーが注文情報の入力を完了した時点で送信できるように、<button>タグを配置するとよいでしょう。

このチュートリアルでは、HTMLにおける<button>タグの使い方を解説しました。あわせて、カスタムボタンを作成するためにタグと組み合わせて使用できる主な属性についても説明し、それらの属性の具体的な使用例をいくつか紹介しました。

これであなたも、HTMLの<button>タグを使ってプロのようにボタンを作成できるようになりました！