formaction属性を超えた！HTMLフォーム送信先URLの柔軟な制御方法

formaction 属性のしくみ

<form> 要素には、action 属性を使用して、デフォルトの送信先 URL を設定します。
<input type="submit"> または <button> 要素に formaction 属性を設定すると、そのボタンまたは入力フィールドがクリックされたときに送信される URL を個別に指定できます。
formaction 属性 が設定されたボタンまたは入力フィールドがクリックされた場合、その要素の formaction 属性値がフォームの action 属性値を 上書き し、フォームデータはその URL に送信されます。
formaction 属性 が設定されていないボタンまたは入力フィールドがクリックされた場合、またはフォームが JavaScript コードなどで送信された場合は、フォームの action 属性値がデフォルトの送信先 URL として使用されます。

formaction 属性の利点

開発の簡素化
JavaScript を使用せずに、フォームの送信先 URL を動的に変更できます。
ユーザーインターフェースの向上
ユーザーがフォーム内で何を実行しようとしているのかを明確に示すことができます。
柔軟性の向上
単一のフォームで複数の処理を柔軟に処理できます。例えば、フォーム送信時にデータを保存するボタンと、新しいデータを追加するボタンをそれぞれ設定することができます。

formaction 属性の例

以下の例は、formaction 属性を使用して、フォーム送信時にデータを保存するボタンと、新しいデータを追加するボタンをそれぞれ設定する方法を示しています。

<form action="default_processor.php">
  <input type="text" name="username">
  <input type="text" name="email">

  <button type="submit" formaction="save_data.php">保存</button>
  <button type="submit" formaction="add_new_data.php">新規追加</button>
</form>

上記の例では、ユーザーが "保存" ボタンをクリックした場合、フォームデータは save_data.php に送信されます。一方、ユーザーが "新規追加" ボタンをクリックした場合、フォームデータは add_new_data.php に送信されます。

formaction 属性は、HTML5 で導入された比較的新しい属性であるため、古いブラウザーではサポートされない場合があります。
formaction 属性は、<input type="submit"> と <button> 要素でのみ使用できます。

例 1: 単一のフォームで複数の処理を行う

この例では、formaction 属性を使用して、フォーム送信時にデータを保存するボタンと、新しいデータを追加するボタンをそれぞれ設定します。

<form>
  <input type="text" name="username">
  <input type="text" name="email">

  <button type="submit" formaction="save_data.php">保存</button>
  <button type="submit" formaction="add_new_data.php">新規追加</button>
</form>

例 2: JavaScript を使用して formaction 属性を動的に変更する

この例では、JavaScript を使用して、ユーザーの選択に応じて formaction 属性値を動的に変更する方法を示します。

<form id="myForm">
  <input type="text" name="username">
  <input type="text" name="email">

  <select id="process">
    <option value="save_data.php">保存</option>
    <option value="add_new_data.php">新規追加</option>
  </select>

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

<script>
  const form = document.getElementById('myForm');
  const select = document.getElementById('process');

  form.addEventListener('submit', function(event) {
    event.preventDefault();
    form.action = select.value;
    form.submit();
  });
</script>

例 3: 画像ボタンを使用して formaction 属性を設定する

この例では、<input type="image"> 要素を使用して、formaction 属性を設定する方法を示します。

<form action="default_processor.php">
  <input type="text" name="username">
  <input type="text" name="email">

  <input type="image" src="save_icon.png" formaction="save_data.php" alt="保存">
  <input type="image" src="add_icon.png" formaction="add_new_data.php" alt="新規追加">
</form>

しかし、formaction 属性はいくつかの制限があります。

JavaScript を使用しないと、動的に変更することができません。
古いブラウザーではサポートされない場合があります。

これらの制限を回避するために、formaction 属性の代替方法をいくつか検討する必要があります。

代替方法 1: JavaScript を使用してフォームの action 属性を動的に変更する

これは、formaction 属性の最も一般的な代替方法です。以下の手順で行います。

各ボタンまたは入力フィールドに、一意の ID またはクラスを割り当てます。
JavaScript を使用して、これらの要素の click イベントを処理します。
イベントハンドラー内で、form 要素の action 属性を、送信先の URL に設定します。

この方法は、柔軟性が高く、古いブラウザーでも動作します。

例

<form id="myForm">
  <input type="text" name="username">
  <input type="text" name="email">

  <button type="button" id="saveButton">保存</button>
  <button type="button" id="addNewButton">新規追加</button>
</form>

<script>
  const form = document.getElementById('myForm');
  const saveButton = document.getElementById('saveButton');
  const addNewButton = document.getElementById('addNewButton');

  saveButton.addEventListener('click', function() {
    form.action = 'save_data.php';
    form.submit();
  });

  addNewButton.addEventListener('click', function() {
    form.action = 'add_new_data.php';
    form.submit();
  });
</script>

代替方法 2: 複数のフォームを使用する

各処理ごとに個別のフォームを作成することで、formaction 属性を使用せずに送信先 URL を指定することができます。

例

<form action="save_data.php">
  <input type="text" name="username">
  <input type="text" name="email">
  <button type="submit">保存</button>
</form>

<form action="add_new_data.php">
  <input type="text" name="username">
  <input type="text" name="email">
  <button type="submit">新規追加</button>
</form>

この方法は、シンプルでわかりやすいですが、複数のフォームを管理する必要があり、コードが冗長になる可能性があります。

代替方法 3: カスタム属性を使用する

data-* 属性を使用して、送信先 URL を各ボタンまたは入力フィールドにデータ属性として保存し、JavaScript を使用してこれらの属性値を処理することができます。

例

<form>
  <input type="text" name="username">
  <input type="text" name="email">

  <button type="button" data-action="save_data.php">保存</button>
  <button type="button" data-action="add_new_data.php">新規追加</button>
</form>

<script>
  const form = document.querySelector('form');
  const buttons = form.querySelectorAll('button');

  buttons.forEach(button => {
    button.addEventListener('click', function() {
      const action = button.dataset.action;
      form.action = action;
      form.submit();
    });
  });
</script>

この方法は、比較的新しい方法ですが、柔軟性と可読性を兼ね備えています。

formaction 属性は、HTML フォームの送信先 URL を個別に設定する便利な機能ですが、いくつかの制限があります。上記の代替方法を検討することで、より柔軟で堅牢なフォームを作成することができます。

最適な代替方法は、特定の要件と開発者の好みによって異なります。

[HTML5 & CSS3 リファレンス - action属性（