PHP演習 7

PHPを使ったフォームの演習

SELECTを使ったFORMの演習をしました。

 

入力する前のフォームの画面

f:id:develog:20161111104529p:plain

 

入力した後のフォームの画面

f:id:develog:20161111104539p:plain

 

受信した内容を表示した画面

f:id:develog:20161111104545p:plain

 

フォーム側(送信側)ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォームの内容を取得する</title>
<style>
h1, p {
margin-left: 50px;
}
dl {
/* overflow: hidden; 入れると並びがずれる*/
margin: 50px;
}
dt {
float: left;
width: 150px;
}
dd {
margin-bottom: 20px;
}
</style>
</head>

<body>
<h1>フォームに入力した内容を取得する</h1>
<form action="output2.php" method="POST">
<dl>
<dt>お名前:</dt>
<dd><input type="text" name="name" placeholder="山川三平" required></dd>

<dt>生年月日(西暦):</dt>
<dd>
<select name="year">
<?php
for ( $i = 1945; $i <= 2000; $i++ ) {
echo "<option value='$i'>西暦{$i}年</option>";
}
/*valueなしの場合
for ( $i = 1945; $i <= 2000; $i++ ) {
echo "<option>{$i}</option>";
}*/
?>
</select>

<select name="month">
<?php
for ( $i = 1; $i <= 12; $i++ ) {
echo "<option value='$i'>{$i}月</option>";
}
?>
</select>

<select name="day">
<?php
for ( $i = 1; $i <= 31; $i++ ) {
echo "<option value='$i'>{$i}日</option>";
}
?>
</select>

</dd>

<dt>お住いの地域:</dt>
<dd>
<select name="home">
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="関東">関東</option>
<option value="中部">中部</option>
<option value="近畿">近畿</option>
<option value="中国・四国">中国・四国</option>
<option value="九州・沖縄">九州・沖縄</option>
<!--optionに限ってはvalueを省略すると
<option>と</option>の間の文字が使用される-->
</select>
</dd>

<dt>お使いのPC:</dt>
<dd>
<input type="radio" name="pc" id="win" value="Windows" checked><label for="win">Windows</label>
<input type="radio" name="pc" id="mac" value="Mac"><label for="mac">Mac</label>
</dd>

<dt>興味のある科目:</dt>
<dd>
<input type="checkbox" name="category" id="html" value="HTML"><label for="html">HTML</label>
<input type="checkbox" name="category
" id="javascript" value="JavaScript"><label for="javascript">JavaScript</label>
<input type="checkbox" name="category" id="php" value="PHP"><label for="php">PHP</label>
<input type="checkbox" name="category
" id="wordpress" value="wordpress"><label for="wordpress">wordpress</label>
</dd>

<dt>お問い合わせ内容:</dt>
<dd>
<textarea name="message" id="message" rows="5" cols="50"></textarea>
</dd>
</dl>
<p><input type="submit" value="送信する"></p>
</form>
</body>
</html>

 

受信した内容を表示するソース

<?php
$name = htmlspecialchars($_POST['name'],ENT_QUOTES,'UTF-8');
$year = $_POST['year'];
$month = $_POST['month'];
$day = $_POST['day'];
$home = $_POST['home'];
$pc = $_POST['pc'];
$message = htmlspecialchars($_POST['message'],ENT_QUOTES,'UTF-8');
//テキスト以外はhtmlspecialcharsは不要
?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
h1 {
margin-left: 50px;
}
dl {
margin: 50px;
}
dt {
float: left;
width: 150px;
}
dd {
margin-bottom: 20px;
}
</style>
</head>

<body>
<h1>フォームに入力した内容を表示する</h1>
<dl>
<dt>お名前:</dt>
<dd><?php echo $name; ?></dd>

<dt>生年月日:</dt>
<dd><?php echo "{$year}年{$month}月{$day}日"; ?></dd>

<dt>お住いの地域:</dt>
<dd><?php echo $home;?></dd>

<dt>お使いのPC:</dt>
<dd><?php echo $pc;?></dd>

<dt>興味のある科目:</dt>
<dd>
<?php
foreach( $_POST['category'] as $value ){
echo "{$value} ";
}
?>
</dd>

<dt>お問い合わせ内容:</dt>
<dd><?php echo $message;?></dd>

</dl>
</body>
</html>