文字入力以外のフォーム要素

PHP

HTML　フォーム

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>入力フォーム</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<h1>入力フォームあれこれ</h1>
<form action="output3.php" method="post">
<table>
<tr>
<th>氏名</th>
<td><input type="text" name="name" id="name" size="20" maxlength="10"></td>
</tr>
<tr>
<th>好きな色</th>
<td><select name="color">
<option value="" selected>以下の中から選択してください</option>
<option value="赤">赤</option>
<option value="青">青</option>
<option value="黄">黄</option>
<option value="黒">黒</option>
<option value="白">白</option>
</select></td>
</tr>
<tr>
<th>性別</th>
<td>
<input id="gender_male" type="radio" name="gender" value="男性"><label>男性</label><br>
<input id="gender_female" type="radio" name="gender" value="女性"><label>女性</label>
</td></tr>
<tr>
<th>趣味</th>
<td>
<label><input type="checkbox" name="interest[]" value="ゴルフ">ゴルフ</label><br>
<label><input type="checkbox" name="interest[]" value="読書">読書</label><br>
<label><input type="checkbox" name="interest[]" value="旅行">旅行</label>
</td></tr>
<tr>
<th>自己紹介</th>
<td><textarea name="profile" id="profile" rows="4" cols="30" value=""></textarea></td>
</tr>
</table>
<input type="submit" value="送信">
</form>
</div>
</body>
</html>

output3.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力フォームあれこれ</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<h1>入力フォームあれこれ</h1>
<?php
$name = htmlspecialchars($_POST['name'], ENT_QUOTES);
$color = htmlspecialchars($_POST['color'], ENT_QUOTES);
$gender = htmlspecialchars($_POST['gender'],ENT_QUOTES);
$interest =htmlspecialchars(implode(  '、', $_POST[ 'interest' ] ), ENT_QUOTES );
$profile = htmlspecialchars($_POST['profile'],ENT_QUOTES);
?>
<table>
<tr>
<th>氏名</th>
<td><?php print $name ;?></td></tr>
<tr>
<th>好きな色</th>
<td><?php print $color ;?></td>
</tr>
<tr>
<th>性別</th>
<td><?php print $gender ;?></td>
</tr>
<tr>
<th>趣味</th>
<td><?php print $interest ;?></td>
</tr>
<tr>
<th>自己紹介</th>
<td><?php print $profile ;?></td>
</tr>
</table>
</div>
</body>
</html>

css

@charset "utf-8";
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 50px 0 0 50px;
  width: 430px;
  height:auto;
  background: #CCCCCC;
}
h1{
  font-size: 24px;
  border-left: 5px solid #093;
}
table {
  margin-left: 5px;
  background: #FFF;
  border-collapse: collapse;
  border: #6C3 1px solid;
  width: 420px;
  line-height: 1.7;
}
th {
  width: 100px;
  background: #DEFEE3;
  border-bottom: #6C3 1px solid;
}
td {
  border-bottom: #6C3 1px solid;
}