ウェブ学のすすめ

Study of Web Design & Programing

REQUESTを使ってPHPの入力フォームを作る

PHP

プレビュー

f:id:vinton:20140202193700p:plain

↓別ウィンドウを開いて見る
form

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格：無料

コード

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>form</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">

<form action="thanks.php" name="input_form"　method="post">
<table>
<tr><th>氏名</th><td><input type="text" name="name" placeholder="山田　太郎" size="40"></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="email" placeholder="xxx@sample.com" size="40"></td></tr>
<tr><th>性別</th>
<td><label id="male">男性：<input type="radio" name="gender" value="男性" id="male" checked></label><br>
<label id="female">女性：<input type="radio" name="gender" value="女性" id="female"></label></td></tr>
<tr><th>好きな色</th>
<td>
<select name="color">
<option value="選択なし" selected>選択してください</option>
<option value="赤" id="red">赤</option>
<option value="青" id="blue">青</option>
<option value="緑" id="green">緑</option>
<option value="黄" id="yellow">黄</option>
</select>
</td>
</tr>
<tr><th>趣味</th>
<td>
<label id="book">読書：<input type="checkbox" name="hobbies[]" value="読書" id="book" checked></label><br>
<label id="travel">旅行：<input type="checkbox" name="hobbies[]" value="旅行"id="travel"></label><br>
<label id="sport">スポーツ：<input type="checkbox" name="hobbies[]" value="スポーツ"id="sport"></label>
</td></tr>
<tr><th>お問い合わせ</th><td><textarea name="question" cols="30" rows="10"></textarea></td></tr>
</table>
<input type="submit" value="送信">
</form>
</div>
<script src="index.js"></script>
</body>
</html>

thanks.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>form</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">

<table>
<tr><th>氏名</th><td><?php echo(htmlspecialchars($_REQUEST["name"],ENT_QUOTES)); ?></td></tr>
<tr><th>メールアドレス</th><td><?php echo(htmlspecialchars($_REQUEST["email"],ENT_QUOTES)); ?></td></tr>
<tr><th>性別</th><td><?php echo(htmlspecialchars($_REQUEST["gender"],ENT_QUOTES)); ?></td></tr>
<tr><th>好きな色</th><td><?php echo(htmlspecialchars($_REQUEST["color"],ENT_QUOTES)); ?></td></tr>
<tr><th>趣味</th><td><?php echo(htmlspecialchars( implode( "、", $_REQUEST["hobbies"]),ENT_QUOTES)); ?></td></tr>
<tr><th>お問い合わせ</th><td><?php echo(htmlspecialchars($_REQUEST["question"],ENT_QUOTES)); ?></td></tr>
</table>

</div>
<script src="index.js"></script>
</body>
</html>

CSS

@charset "utf-8";

body {
	background-color:#eee;
}

table {
	border:1px solid #333;
	border-collapse:collapse;
	background-color:#fff;
}

th,td {
	border:1px solid #333;
	padding:5px;
}

th {
	background-color:#2D89F0;
	color:#FFF;
	width:160px;
	height:30px;
}

td {
	padding-left:10px;
	width:290px;
	height:30px;
}

#container {
	width:450px;
	margin:20px auto 0;
}

#red {
	color:#F00;
}
#blue {
	color:#00F;
}
#green {
	color:#093;
}
#yellow {
	color:#FC3;
}

JavaScript

window.addEventListener('load',
	function(){
		setTimeout(function(){
			scrollTo(0,1);
		},100);
	},
false);