HTMLのformで配列をPOSTする方法

HTMLのformで配列をPOSTする方法
- 配列データのPOST方法
- POSTリクエストの処理

HTMLのformを使って配列データをPOSTする方法について説明します。
配列データを送信する場合、HTMLのform要素とJavaScriptを組み合わせて扱うことが一般的です。
以下に、具体的な方法を示します。

配列データのPOST方法

HTMLのformで配列データを送信するには、以下の手順に従います。

1. HTMLのform要素を作成する

form要素には、action属性でデータ送信先のURL、method属性でHTTPメソッド（通常はPOST）を指定します。
配列データを送信するためには、各入力フィールドのname属性を配列の形式に設定します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Post Array Data</title>
</head>
<body>
  <form id="myForm" action="/submit" method="POST">
    <input type="text" name="items[0]" value="Item 1">
    <input type="text" name="items[1]" value="Item 2">
    <input type="text" name="items[2]" value="Item 3">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

上記の例では、itemsという名前の配列がPOSTリクエストで送信されます。
各入力フィールドのname属性にitems[0], items[1], items[2]のようにインデックスを指定しています。

2. JavaScriptを使用して配列を動的に生成する

HTMLのformで配列を動的に生成する場合、JavaScriptを使って入力フィールドを追加する方法があります。
以下は、ボタンをクリックすると入力フィールドが追加される例です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Post Array Data</title>
  <script>
    function addInput() {
      const container = document.getElementById('inputContainer');
      const index = container.children.length;
      const input = document.createElement('input');
      input.type = 'text';
      input.name = `items[${index}]`;
      input.placeholder = `Item ${index + 1}`;
      container.appendChild(input);
    }
  </script>
</head>
<body>
  <form id="myForm" action="/submit" method="POST">
    <div id="inputContainer">
      <!-- 動的に追加される入力フィールドがここに入る -->
    </div>
    <button type="button" onclick="addInput()">Add Input</button>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

この例では、「Add Input」ボタンをクリックすると、items配列の新しい入力フィールドが追加されます。
name属性にはitems[0], items[1], items[2]とインデックスが付与され、配列データとして送信されます。

POSTリクエストの処理

サーバー側で受け取ったデータは、リクエストのボディに含まれる配列データとして処理できます。
例えば、PHPを使用して配列データを受け取る場合の例は以下の通りです。

<?php
// 配列データを受け取る
$items = $_POST['items'];

// 配列の内容を確認する
foreach ($items as $item) {
  echo htmlspecialchars($item) . '<br>';
}
?>

上記のPHPスクリプトでは、$_POST['items']で送信された配列データを取得し、foreachループでその内容を表示しています。
htmlspecialchars関数を使って、HTML特殊文字をエスケープしています。

これで、HTMLのformを使って配列データをPOSTする基本的な方法がわかります。
必要に応じて、JavaScriptやサーバーサイドのスクリプトを使ってデータを柔軟に扱うことができます。