【HTML】formでname属性の使い方・配列にする方法

form関連の要素にname属性をつけます｡

name属性に日本語を使うことも可能ですが､レアなブラウザやプログラムで不具合が起きることも考えられるため､アルファベットで名前をつけるほうがおすすめです｡

<input type="text" name="name" value="山田太郎">
<input type="text" name="kana" value="やまだたろう">

// 送信結果
array(2) {
  ["name"]=>
  string(12) "山田太郎"
  ["kana"]=>
  string(18) "やまだたろう"
}

name属性の値に[]をつけることで配列として送信することができます｡

一般的に複数選択が可能なチェックボックスで使います｡

<input type="checkbox" name="sports[]" value="野球">野球
<input type="checkbox" name="sports[]" value="サッカー">サッカー
<input type="checkbox" name="sports[]" value="バスケットボール">バスケットボール

// 送信結果
array(1) {
  ["sports"]=>
  array(3) {
    [0]=>
    string(6) "野球"
    [1]=>
    string(12) "サッカー"
    [2]=>
    string(24) "バスケットボール"
  }
}

Web制作をはじめて配列をあまり理解していなかったころはこんな感じのことをしていました｡

<!-- よくないname属性の使い方 -->
<input type="checkbox" name="sports1" value="野球">
<input type="checkbox" name="sports2" value="サッカー">
<input type="checkbox" name="sports3" value="バスケットボール">

受け取ったあとの処理が面倒になるのでこういうname属性の使い方はしないほうがいいです｡

配列にキーをつけて連想配列にすることもできます｡

グループ､カテゴリ分けをしたいときや､複数の値がありつつ､それぞれ名前をつけた場合に使います｡

<div>
<p>SNSアカウント</p>
<div>
Twitter:
<input type="text" name="sns[twitter]" value="@twitter">
</div>
<div>
Instagram:
<input type="text" name="sns[instagram]" value="@instagram">
</div>
<div>
Facebook:
<input type="text" name="sns[facebook]" value="@facebook">
</div>
<div>
TikTok:
<input type="text" name="sns[tiktok]" value="@tiktok">
</div>
</div>

// 送信結果
array(1) {
  ["sns"]=>
  array(4) {
    ["twitter"]=>
    string(8) "@twitter"
    ["instagram"]=>
    string(10) "@instagram"
    ["facebook"]=>
    string(9) "@facebook"
    ["tiktok"]=>
    string(7) "@tiktok"
  }
}

角カッコ内のキーにクォーテーション(ダブルクォーテーション)は必要ありません｡
クォーテーションを書いてしまうと､クォーテーションごとnameになってしまうので注意してください｡

この例の場合､post送信で受け取ると「sns」が配列1階層目のキーとなり､「twitter」「instagram」などが配列2階層目のキーとなります｡

配列を複数の階層にした多次元配列にすることもできます｡

例えば､アンケートフォームで個人情報とは区別するためアンケートの部分をグループにして､項目番号をキー､回答は複数受け付けられるようにする場合などに使えます｡

<div>
<p>問1：何に興味がありますか？(複数選択可)</p>
<label>
<input type="checkbox" name="enquete[1][]" value="HTML･CSS">HTML･CSS
</label>
<label>
<input type="checkbox" name="enquete[1][]" value="JavaScript">JavaScript
</label>
<label>
<input type="checkbox" name="enquete[1][]" value="PHP">PHP
</label>
<label>
<input type="checkbox" name="enquete[1][]" value="WordPress">WordPress
</label>
<label>
<input type="checkbox" name="enquete[1][]" value="その他">その他
</label>
</div>
<div>
<p>問2：何でお知りになりましたか？(複数選択可)</p>
<label>
<input type="checkbox" name="enquete[2][]" value="インターネット">インターネット
</label>
<label>
<input type="checkbox" name="enquete[2][]" value="テレビ･ラジオ">テレビ･ラジオ
</label>
<label>
<input type="checkbox" name="enquete[2][]" value="新聞･雑誌">新聞･雑誌
</label>
<label>
<input type="checkbox" name="enquete[2][]" value="友人･知人">友人･知人
</label>
<label>
<input type="checkbox" name="enquete[2][]" value="その他">その他
</label>
</div>

// 送信結果
array(1) {
  ["enquete"]=>
  array(2) {
    [1]=>
    array(5) {
      [0]=>
      string(10) "HTML･CSS"
      [1]=>
      string(10) "JavaScript"
      [2]=>
      string(3) "PHP"
      [3]=>
      string(9) "WordPress"
      [4]=>
      string(9) "その他"
    }
    [2]=>
    array(5) {
      [0]=>
      string(21) "インターネット"
      [1]=>
      string(21) "テレビ･ラジオ"
      [2]=>
      string(15) "新聞･雑誌"
      [3]=>
      string(15) "友人･知人"
      [4]=>
      string(9) "その他"
    }
  }
}

応用として見出し･項目名も回答と一緒に配列にして送信すると､確認画面や送信するメール本文をつくるのにつくりやすくなります｡

この方法でないとjsonを別でつくっておいてnameを変換するとか､ひとつずつ個別にて入力しないといけなくて面倒ですし､あまりスマートになりません｡

        <table class="table">
          <tr>
            <th>
              <input type="hidden" name="customer[name][head]" value="名前">名前
            </th>
            <td>
              <input type="text" name="customer[name][data]" value="山田太郎">
            </td>
          </tr>
          <tr>
            <th>
              <input type="hidden" name="customer[kana][head]" value="かな">かな
            </th>
            <td>
              <input type="text" name="customer[kana][data]" value="やまだたろう">
            </td>
          </tr>
          <tr>
            <th>
              <input type="hidden" name="customer[age][head]" value="年齢">年齢
            </th>
            <td>
              <input type="text" name="customer[age][data]" value="28">
            </td>
          </tr>
          <tr>
            <th>
              <input type="hidden" name="customer[email][head]" value="メールアドレス">メールアドレス
            </th>
            <td>
              <input type="email" name="customer[email][data]" value="example@example.com">
            </td>
          </tr>
        </table>

// 送信結果
array(1) {
  ["customer"]=>
  array(4) {
    ["name"]=>
    array(2) {
      ["head"]=>
      string(6) "名前"
      ["data"]=>
      string(12) "山田太郎"
    }
    ["kana"]=>
    array(2) {
      ["head"]=>
      string(6) "かな"
      ["data"]=>
      string(18) "やまだたろう"
    }
    ["age"]=>
    array(2) {
      ["head"]=>
      string(6) "年齢"
      ["data"]=>
      string(2) "28"
    }
    ["email"]=>
    array(2) {
      ["head"]=>
      string(21) "メールアドレス"
      ["data"]=>
      string(19) "example@example.com"
    }
  }
}

細かなことを無視すれば､phpでforeach文を1回まわすだけで､HTMLやメール本文を出力することができます｡

<?php
  foreach( $_POST["customer"] as $key => $value ){
    echo $value["head"] . ":" . $value["data"] . "<br>";
  } 
?>