PHP入門 ～問い合わせフォームの作成を目指す～ 第10章(フォームの完成)
◎フォームを完成させる
繰り返し処理と変数展開を用いて多数のoptionタグを作る
for ($i = 1;$i<4;$i++){
echo "<option value='{$i}'>{$i}</option>";
}
【例題】
まず年齢を6歳から100歳を選択できるようにする。
<?php
for($i=6;$i<101;$i++){
echo "<option value='{$i}'>{$i}</option>";
}
?>
【フォームの完成コード】
・index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP独学</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-left">PHP独学</div>
<div class="header-right">
<ul>
<li>プロフィール</li>
<li>備忘録</li>
<li class="selected">お問い合わせ</li>
</ul>
</div>
</div>
<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="sent.php">
<div class="form-item">名前</div>
<input type="text" name="name">
<div class="form-item">年齢</div>
<select name="age">
<option value="未選択">選択してください</option>
<!-- for文を用いて6歳から100歳までをoptionで選択できるようにする -->
<?php
for($i=6;$i<101;$i++){
echo "<option value='{$i}'>{$i}</option>";
}
?>
</select>
<div class="form-item">お問い合わせの種類</div>
<?php
$types = array('Progateに関するお問い合わせ', 'Progateに対する意見', '採用に関するお問い合わせ', '取材・メディア関連のお問い合わせ', '料金に関するお問い合わせ', 'その他');
?>
<!-- この下にselectタグを記載 -->
<select name="category">
<option value="未選択">選択してください</option>
<?php
foreach ($types as $type){
echo "<option value = '{$type}'>{$type}</option>";
}
?>
<div class="form-item">内容</div>
<textarea name="body"></textarea>
<input type="submit" value="送信">
</form>
</div>
</div>
</body>
</html>
・sent.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP独学</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-left">PHP独学</div>
<div class="header-right">
<ul>
<li>プロフィール</li>
<li>備忘録</li>
<li class="selected">お問い合わせ</li>
</ul>
</div>
</div>
<div class="main">
<div class="thanks-message">お問い合わせいただきありがとうございます。</div>
<div class="display-contact">
<div class="form-title">入力内容</div>
<div class="form-item">■ 名前</div>
<?php echo $_POST['name']; ?>
<div class="form-item">■ 年齢</div>
<?php echo $_POST['age']; ?>
<div class="form-item">■ お問い合わせの種類</div>
<!-- この下でcategoryを受け取り表示させる -->
<?php
echo $_POST['category']; ?>
<div class="form-item">■ 内容</div>
<?php echo $_POST['body']; ?>
</div>
</body>
</html>
・CSS
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.header {
height: 65px;
border-bottom: 1px solid #dddddd;
}
.header-left {
float: left;
padding: 10px 60px;
color: #ED7000;
font-size: 30px;
}
.header-right {
float: right;
color: #808080;
}
.header-right li {
float: left;
padding: 20px 30px;
border-left: 1px solid #dddddd;
}
.selected {
color: #ED7000;
}
.main {
min-width: 800px;
}
.contact-form {
width: 70%;
margin: 60px auto;
padding: 50px;
background-color: #F5F5F5;
color: #333;
}
.form-title {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
}
.form-item {
padding: 20px 0 10px 0;
font-weight: bold;
}
input[type="text"] {
width: 30%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
font-size: 14px;
line-height: 1.428571429;
color: #555;
}
input[type="submit"] {
margin-top: 30px;
width: 30%;
border: 1px solid #5cb85c;
border-radius: 4px;
padding: 12px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
font-size: 14px;
line-height: 1.428571429;
color: white;
background-color: #5cb85c;
}
textarea {
width: 90%;
height: 100px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
font-size: 14px;
line-height: 1.428571429;
color: #555;
}
.thanks-message {
margin-top: 50px;
text-align: center;
font-size: 24px;
}
.display-contact {
width: 70%;
margin: 30px auto;
padding: 50px;
background-color: #F5F5F5;
color: #333;
}
