webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

チェックボックスの値を配列で渡す

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>複数選択可の項目があるフォームの作成</title>
<style>
html,body,h1,dl,dt,dd {
  margin:0;
  padding:0;
  line-height:1.0;
}
form {
  width:60%;
  margin: 100px auto 0;
}
dt {
  width:30%;
  float:left;
  margin-bottom:40px;
  font-weight:bold;
}
dd {
  margin-left:30%;
  margin-bottom:40px;
}
</style>
</head>

<body>
<form action="output.php" method="post">
<dl>
<dt>お名前</dt>
<dd><input type="text" name="name" required placeholder="山田 太郎"></dd>
<dt>メールアドレス</dt>
<dd><input type="email" name="email" required></dd>
<dt>好きな色(複数選択可)</dt>
<dd>
<input type="checkbox" id="black" name="color[]" value="0"><label for="black"></label> 
<input type="checkbox" id="red" name="color[]" value="1"><label for="red"></label> 
<input type="checkbox" id="green" name="color[]" value="2"><label for="green"></label> 
<input type="checkbox" id="blue" name="color[]" value="3"><label for="blue"></label>
</dd>
<dt></dt>
<dd><input type="submit" value="送信"> <input type="reset" value="リセット"></dd>
</dl>
</form>
</body>
</html>


受け取る側
output.php

<?php
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
?>


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>複数選択可のフォーム|受け取り</title>
</head>

<body>
<dl>
<dt>お名前</dt>
<dd><?php echo $name; ?></dd>
<dt>メールアドレス</dt>
<dd><?php echo $email; ?></dd>
<dt>好きな色</dt>
<dd>
<?php
/*foreach( $_POST['color'] as $value ){
    echo "{$value}"; }
*/

$list = array('0' => '黒色', '1' => '赤色', '2' => '緑色', '3' =>'青色');

foreach( $_POST['color'] as $value ){
echo $list[$value] . ' ';}
?>
</dd>
</dl>
</body>
</html>