HTML フォームの複数送信ボタン

2024-10-07

HTML フォームにおける複数の送信ボタンの解説

HTML フォームでは、通常、送信ボタンは1つのみ存在します。しかし、特定のシナリオにおいて、複数の送信ボタンを使用することが有用な場合があります。

複数の送信ボタンの使用シナリオ

より直感的なユーザーインターフェイス
複数のボタンを使用することで、ユーザーが意図するアクションを明確に選択できるようになります。
条件付き送信
特定の条件に基づいて異なる処理を実行する場合、各ボタンに異なる value 属性を指定し、サーバー側でその値をチェックします。
異なるアクションをトリガーする場合
異なるボタンが異なる処理を実行する必要がある場合、各ボタンに異なる action 属性を指定します。

実装例

<form action="process.php" method="post">
  <input type="text" name="username">
  <input type="password" name="password">

  <input type="submit" name="submit_button" value="L   ogin">
  <input type="submit" name="submit_button" value="Register">
</form>

この例では、2つの送信ボタンが定義されています。サーバー側では、$_POST['submit_button'] の値をチェックして、ユーザーがログインまたは登録を選択したかどうかを判断できます。

JavaScriptでの制御

JavaScriptを使用して、送信ボタンのクリックイベントを処理し、特定のアクションを実行することもできます。

<script>
  function handleFormSubmit(event) {
    event.preventDefault(); // フォームのデフォルトの送信を阻止

    if (event.target.value === "Login") {
      // ログイン処理
    } else if (event.target.value === "Register") {
      // 登録処理
    }
  }

  const form = document.getElementById("myForm");
  form.addEventListener("submit", handleFormSubmit);
</script>

この例では、JavaScriptを使用して、送信ボタンのクリックイベントを処理し、ボタンの値に基づいて異なる処理を実行しています。

コード例1: 異なるアクションをトリガーする場合

<form>
  <input type="submit" formaction="login.php" formmethod="post" value="ログイン">
  <input type="submit" formaction="register.php" formmethod="post" value="登録">
</form>

解説
- 各送信ボタンに formaction 属性で異なる送信先を指定することで、ボタンをクリックした際に異なる PHP スクリプトにデータを送信できます。
- formmethod 属性で HTTP メソッドを指定できます (デフォルトは GET、この例では POST を使用)。
- それぞれのボタンに分かりやすい value 属性を設定することで、ユーザーがどのボタンをクリックしたか視覚的に分かりやすくなります。

コード例2: 条件付き送信 (JavaScript による制御)

<form id="myForm">
  <input type="submit" name="submit_button" value="保存">
  <input type="submit" name="submit_button" value="削除">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', (event) => {
    event.preventDefault(); // フォームのデフォルトの送信を阻止

    const buttonValue = event.target.value;
    if (buttonValue === '保存') {
      // 保存処理 (例: Ajax でデータをサーバーに送信)
      fetch('save.php', {
        method: 'POST',
        // 必要なデータをJSON形式などで送信
      })
      .then(response => response.json())
      .then(data => {
        // サーバーからのレスポンス処理
      });
    } else if (buttonValue === '削除') {
      // 削除処理 (確認ダイアログを表示するなど)
      if (confirm('本当に削除しますか？')) {
        // 削除処理 (例: Ajax でデータをサーバーに送信)
      }
    }
  });
</script>

解説
- 複数の送信ボタンに同じ name 属性を指定し、JavaScript で event.target.value を使ってどのボタンがクリックされたか判別します。
- event.preventDefault() でフォームのデフォルトの送信を阻止し、JavaScript で独自に処理を行います。
- この例では、Ajax を使用して非同期にデータをサーバーに送信していますが、通常のフォーム送信でも可能です。

コード例3: サーバー側での処理 (PHP の例)

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $buttonValue = $_POST['submit_button'];
  if ($buttonValue === 'ログイン') {
    // ログイン処理
  } else if ($buttonValue === '登録') {
    // 登録処理
  }
}

解説
- PHP で $_POST スーパーグローバル変数を使って、送信されたデータを取得します。
- submit_button の値によって、どのボタンがクリックされたか判断し、それぞれの処理を行います。

HTML フォームに複数の送信ボタンを設置することで、より柔軟なユーザーインターフェースを実現できます。JavaScript を組み合わせることで、より複雑な処理も可能になります。

ポイント

サーバー側
送信されたデータを処理し、適切なアクションを実行する。
JavaScript
ボタンのクリックイベントを処理し、非同期処理などを行うことができる。
formmethod 属性
HTTP メソッドを指定できる。
formaction 属性
各ボタンに異なる送信先を指定できる。

注意点

JavaScript を使用する場合、ブラウザの互換性にも注意が必要です。
複数の送信ボタンを使用する際は、サーバー側でどのボタンがクリックされたか正しく判別する仕組みが必要です。

JavaScript を用いたイベントリスナー

デメリット
- JavaScript が実行されない環境では動作しない。
- コードが複雑になる可能性がある。
メリット
- ボタンごとに異なる処理を細かく制御できる。
- Ajax を利用して非同期通信を行い、ページ遷移なしに処理を実行できる。

const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // フォームのデフォルト送信を阻止

  const button = event.target;
  if (button.value === '保存') {
    // 保存処理 (Ajaxなど)
  } else if (button.value === '削除') {
    // 削除処理
  }
});

hidden 入力要素を利用した方法

デメリット
メリット

<form>
  <input type="hidden" name="action" value="">
  <input type="submit" name="save" value="保存" onclick="document.getElementsByName('action')[0].value='save'">
  <input type="submit" name="delete" value="削除" onclick="document.getElementsByName('action')[0].value='delete'">
</form>

解説
- hidden 入力要素に、どのボタンがクリックされたかの情報を格納する。
- 各ボタンの onclick 属性で、hidden 入力要素の値を変更する。

CSS と JavaScript を組み合わせた方法

デメリット
- 実装が少し複雑になる。
メリット
- ボタンのデザインを自由にカスタマイズできる。
- イベントリスナーで柔軟な処理が可能。

<button class="submit-button" data-action="save">保存</button>
<button class="submit-button" data-action="delete">削除</button>

<script>
  const buttons = document.querySelectorAll('.submit-button');
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      // data-action 属性の値を取得し、処理を実行
    });
  });
</script>

フレームワークやライブラリを利用する方法

例
- React
  Formik, React Hook Form
- Vue.js
  Vue Form
- Angular
  Angular Material
デメリット
- 学習コストがかかる場合がある。
- 既存の機能やコンポーネントを再利用できる。
- 開発効率が向上する。