HTML フォーム送信

<button> 要素は、ユーザーに対してフォームの送信（サブミット）処理をトリガーする手段を提供します。
<input type="submit"> 要素も同じ目的で使用できますが、<button> 要素の方がボタンの外観や挙動において、より高い柔軟性と制御力を備えています。

1. <button> 要素の理解

<button> 要素は、HTML フォーム内におけるクリック可能なボタンを定義します。テキストだけでなく、画像や他の HTML 要素を含めることができ、シンプルな <input type="submit"> と比較して、よりリッチなボタンデザインが可能です。

1.1 基本構文

<button> 要素の基本構文は以下の通りです。

<button type="submit">送信</button>

ここで、type="submit" は最も重要な属性です。これは、ボタンがクリックされたときにフォームデータを送信することを指定します。この属性がない場合、ボタンの挙動はブラウザによって不一致が生じる可能性があり（通常は submit がデフォルトですが）、あるいはカスタム JavaScript を追加しない限り、単なる普通のボタンとして動作し、送信をトリガーしません。

2. 主要な属性

• type: ボタンのタイプを指定します。よく使われる値は以下の通りです。
• submit: フォームデータをサーバーに送信します。フォーム送信において最も一般的で重要なタイプです。
• reset: すべてのフォームコントロールを初期値にリセットします。
• button: デフォルトの挙動を持たない汎用的なボタンを定義します。これは通常、JavaScript と組み合わせてカスタム機能を実装するために使用されます。
• name: ボタンの名称を指定します。フォーム内に複数のボタンがある場合、どのボタンがクリックされたかを識別するために重要になります。クリックされたボタンの name-value ペアが、他のフォームデータと共に送信されます。
• value: ボタンの値を指定します。ボタンがクリックされた際、この値がフォームデータと共に送信されます。
• form: ボタンが属する一つまたは複数のフォームの ID を指定します。これにより、ボタンが <form> 要素の外部に配置されていても、特定のフォームと関連付けることができます。複雑なレイアウトを構築する際に非常に便利です。

2.1 例：シンプルな送信ボタン

<form action="/submit" method="post">
  <label for="name">氏名：</label><br>
  <input type="text" id="name" name="name"><br><br>
  <button type="submit">送信</button>
</form>

この例では、「送信」ボタンをクリックすると、POST メソッドを使用してフォームデータが /submit という URL に送信されます。

2.2 例：name と value 属性の使用（複数ボタンのロジック）

<form action="/submit" method="post">
  <label for="quantity">数量：</label><br>
  <input type="number" id="quantity" name="quantity" value="1"><br><br>
    
  <button type="submit" name="action" value="add">カートに入れる</button>
  <button type="submit" name="action" value="remove">カートから出す</button>
</form>

このケースでは、フォームに 2 つの送信ボタンが含まれています。

• 「カートに入れる」をクリックした場合、送信されるデータには action=add が含まれます。
• 「カートから出す」をクリックした場合、送信されるデータには action=remove が含まれます。 サーバー側のスクリプトはこの情報を利用して、どちらのアクションを実行するかを判断できます。

2.3 例：form 属性の使用（外部ボタン）

<form id="myForm" action="/submit" method="post">
  <label for="email">メールアドレス：</label><br>
  <input type="email" id="email" name="email"><br><br>
</form>

<button type="submit" form="myForm">購読する</button>

ここでは、ボタンが <form> 要素の外にありますが、form="myForm" 属性によって関連付けられています。この「購読する」ボタンをクリックすると、ID が "myForm" であるフォームが送信されます。

3. <button> 要素のスタイリング

CSS を使用して <button> 要素をスタイリングし、ウェブサイト全体のデザインに合わせることができます。background-color（背景色）、color（文字色）、padding（内辺距）、border（境界線）などのプロパティを制御できます。

例：送信ボタンのスタイリング

<style>
  .submit-button {
    background-color: #4CAF50; /* 緑色の背景 */
    border: none;
    color: white; /* 白色の文字 */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer; /* マウスをポインター（手型）にする */
    border-radius: 5px; /* 角丸 */
  }
</style>

<form action="/submit" method="post">
  <label for="message">メッセージ：</label><br>
  <textarea id="message" name="message"></textarea><br><br>
  <button type="submit" class="submit-button">メッセージを送信</button>
</form>

4. <button> vs. <input type="submit">

どちらもフォーム送信に使用できますが、いくつか重要な違いがあります。

5. <button> 要素によるフォーム送信の制御（高度な属性）

<button> 要素は送信をトリガーするだけでなく、特定の属性を通じて <form> 要素のデフォルト設定をオーバーライド（上書き）することもできます。これは、一つのフォーム内でクリックされたボタンに応じて異なる処理を行いたい場合に非常に有用です。

5.1 formaction 属性

formaction 属性を使用すると、特定のボタンに対して <form> 要素の action 属性を上書きできます。これにより、ボタンごとにデータを異なる URL へ送信させることが可能です。

<form action="/default-action" method="post">
  <label for="product">製品 ID：</label><br>
  <input type="text" id="product" name="product"><br><br>
    
  <button type="submit">カートに追加</button> 
  <button type="submit" formaction="/checkout">今すぐ購入</button> 
</form>

5.2 formmethod 属性

formmethod 属性を使用すると、特定のボタンに対して <form> 要素の method 属性を上書きできます。これにより、同じフォーム内でボタンごとに異なる HTTP メソッド（GET または POST）を使い分けることができます。

<form action="/process-form" method="post">
  <input type="text" id="search" name="search">
    
  <button type="submit">保存 (POST)</button>
  <button type="submit" formmethod="get">検索 (GET)</button>
</form>

5.3 formenctype 属性

formenctype 属性は、フォームデータを送信する際のエンコーディング方式を指定し、<form> の enctype を上書きします。これは特にファイルアップロードを扱う際に関連します。

• application/x-www-form-urlencoded: デフォルト値。
• multipart/form-data: ファイルアップロード用。
• text/plain: プレーンテキスト用。

<form action="/upload" method="post">
  <input type="file" id="file" name="file">
  <button type="submit" formenctype="multipart/form-data">ファイルをアップロード</button>
</form>

5.4 formtarget 属性

formtarget 属性は、送信後のレスポンスをどこに表示するかを指定し、<form> の target 属性を上書きします。

• _self: 現在のタブで開く（デフォルト）。
• _blank: 新しいタブで開く。

<form action="/process-form" method="post">
  <button type="submit">送信</button>
  <button type="submit" formtarget="_blank">送信して新しいウィンドウで開く</button>
</form>

6. まとめ

本章では、<button> 要素とその HTML フォーム送信における役割について探求しました。

• ボタンの挙動を制御する主要属性（type、name、value）を学びました。
• 高度なオーバーライド属性（formaction、formmethod、formenctype、formtarget）をマスターしました。
• <button> が <input type="submit"> よりも優れている点（主にコンテンツとスタイルの柔軟性）について議論しました。