フォーム

PHP 



<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テーブルフォーム</title>
<link rel="stylesheet" href="css/1008_3_style.css" media="all">
</head>
<body>
<form action="1008_3_output.php" method="post">
  <table>
    <tr>
      <th><label for="name">氏名</label></th>
      <td><input type="text" name="name" id="name" size="30" maxlength="60"></td>
    </tr>
    <tr>
      <th><label for="job">職業</label></th>
      <td><select name="job">
               <option value="" selected>以下から選択してください</option>
               <option value="勇者">勇者</option>
               <option value="魔法使い">魔法使い</option>
               <option value="剣士">剣士</option>
               <option value="僧侶">僧侶</option>
             </select></td>
    </tr>
    <tr>
      <th>性別</th>
      <td>
        <input type="radio" name="gender" id="gender_male" value="男性">
         <label for="gender_male">男性</label><br>
        <input type="radio" name="gender" id="gender_female" value="女性">
         <label for="gender_female">女性</label>
       </td>
    </tr>
    <tr>
      <th>転職希望</th>
      <td>
        <label><input type="checkbox" name="recruit[]" value="勇者" checked>勇者</label><br>
        <label><input type="checkbox" name="recruit[]" value="賢者">賢者</label><br>
        <label><input type="checkbox" name="recruit[]" value="武闘家">武闘家</label><br>
        <label><input type="checkbox" name="recruit[]" value="遊び人">遊び人</label>
      </td>
    </tr>
    <tr>
      <th><label for="introduction">自己紹介</label></th>
      <td>
        <textarea name="introduction" id="introduction" rows="3" cols="40" value=""></textarea>
      </td>
    </tr>
  </table>
  <input type="submit" value="送信" class="btn">
</form>
</body>
</html>

@charset "UTF-8";

table {
  border-collapse: collapse;
  border-spacing: 0;
  color: #333;
  font-size: 14px;
  width:400px;
}
tr {
  border: 1px solid #787878;
}
th {
  background: #7587AA;
  color: #FFF;
  font-weight: normal;
  padding:5px;
}
td {
  background:#EEE;
  padding:5px;
}
input.btn {
  text-align: center;
  font-size: 90%;
  width: 50px;
  margin: 10px auto;
}
.btn {
  color: #333;
  border: 1px solid #AAA;
  cursor: pointer;
  background: #EEE;
  padding:3px;
}
.btn:hover {
  color: #666;
  background: #FFF;
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テーブルフォーム</title>
<link rel="stylesheet" href="css/1008_3_style.css" media="all">
</head>
<body>
<?php
  $name = htmlspecialchars( $_POST['name'], ENT_QUOTES, 'UTF-8' );
  $color = htmlspecialchars( $_POST['job'], ENT_QUOTES, 'UTF-8' );
  $gender = htmlspecialchars( $_POST['gender'], ENT_QUOTES, 'UTF-8' );
  $recruit = htmlspecialchars( implode("、", $_POST['recruit']), ENT_QUOTES, 'UTF-8' );
  $introduction = nl2br(htmlspecialchars( $_POST['introduction'], ENT_QUOTES, 'UTF-8' ));
?>
<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 $recruit; ?></td>
    </tr>
    <tr>
      <th>自己紹介</th>
      <td><?php print $introduction; ?></td>
    </tr>
  </table>
</body>
</html>

ポイント１

チェックボックスで複数選択したとき、配列を拾うようにするための記述

input.php側
<label><input type="checkbox" name="変数名[]" value="○○">○○</label>

output側
$recruit = htmlspecialchars( implode("くぎりの語句", $_POST['変数名']), ENT_QUOTES );

ポイント２

textareaに改行を入れた入力をされたとき、その改行を反映して表示させる記述

$変数名 = nl2br(htmlspecialchars( $_POST['変数名'], ENT_QUOTES ));