ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

アフィリエイト広告を利用しています

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

この記事は、最初の投稿から1年以上が経過しています。

最終更新から401日が経過しています。

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

「Webサイトのメールフォームでcheckboxの値を配列にして送信したい」

「formで使うname属性って配列にできるの?」

悩み

こんな悩みにお答えします。

formのname属性には[](角カッコ)をつけることができ、角カッコをつけると配列で送信することができます。

また、角カッコ内にキーをつけることもできます。

配列を使うことで確認画面や送信するメール内容をつくりやすくなります。

私は、2015年頃からWeb制作の仕事をはじめて、170件以上のWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

この記事では、name属性の使い方や配列にする方法、キーをつける方法を解説しています。

記事を読み終えると、メールフォームなどのコーディング、プログラミングを効率よくできるようになります。

目次
  1. formでname属性の使い方
    1. 基本的なname属性の使い方
  2. name属性を配列にして送信する方法
    1. name属性に角カッコをつけて配列にする
    2. name属性の角カッコにキーをつけた配列にする
    3. name属性に複数の角カッコをつけて多次元配列にする
    4. 配列に見出しと値をまとめて送信する
  3. まとめ

formでname属性の使い方

基本的なname属性の使い方

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

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

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

HTMLで使うform部品一覧はこちらで紹介しています。

【HTML】form部品一覧まとめ

HTML form部品について知りたいですか?この記事では、form部品のHTMLタグと実際に表示されているものを紹介しています。ぜひご覧ください。

name属性を配列にして送信する方法

name属性に角カッコをつけて配列にする

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属性の使い方はしないほうがいいです。

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階層目のキーとなります。

name属性に複数の角カッコをつけて多次元配列にする

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

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

<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>";
  } 
?>

まとめ

name属性の使い方を解説しました。

  • name属性はできるだけアルファベットで名前をつける
  • name属性に角カッコをつけると配列にできる
  • name属性の配列にはキーをつけることもできる
  • name属性の配列は複数の配列(多次元配列)にもできる
  • 配列に見出しと値をまとめて送信すると扱いやすくなる