お問い合わせ入力フォーム(1)

お問い合わせ入力フォーム(1)

《input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ入力フォーム</title>
<link href="style.css" rel="stylesheet" media="all">
</head>
<body>
<div id="confirmation">
<form action="check.php" method="post" id="inquiry">
<table summary="お問い合わせに関する入力項目名とその入力欄">
<tr>
<th><label for="name">お名前</label></th>
<td><input type="text" name="name" size="30" id="name" class="text1"></td>
</tr>
<tr>
<th><label for="email">メールアドレス</label></th>
<td><input type="text" name="email" size="30" id="email" class="text2"></td>
</tr>
<tr>
<th><label for="message">ご意見</label></th>
<td><textarea name="message" cols="30" rows="5" class="text3" id="message"></textarea></td>
</tr>
</table>
<input type="submit" value="確認画面へ">
</form>
</div>
</body>
</html>

《style.css

@charset "UTF-8";

body {
  font-size: 1.0em;
  font-family: sans-serif;
  line-height: 1.5;
  color: #333333;
  background-color: #FFFFFF;
}
#inquiry {
  width: 600px; /* ボックスの幅を指定 */
  margin: 100px 0 0 100px;
}
#confirmation {
  width: 600px; /* 確認画面の幅を指定 */
  margin: 100px 0 0 100px;
  padding: 0.5em 1em;
  border-left: #C21300 6px solid;
}
#inquiry th {
  text-align: right;
}
#confirmation ul {
  list-style: none;
  margin: 0 0 2em 0;
  padding: 0;
}
#confirmation form {
  margin: 0;
  padding: 0;
}


入力データのチェック

  • 「戻る」ボタンの設置は、次ページで解説


《check.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
<link href="style.css" rel="stylesheet" media="all">
</head>
<body>
<?php
 $name = $_POST['name'];
	 if($name=='') {
		  print 'お名前が入力されていません。';
	 } else {
		  print 'ようこそ、'.$name.'';
  }
?>
</body>
</html>
入力項目を増やす(追記)
  • 「name」以外に「email」と「message」を取得する


《check.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
<link href="style.css" rel="stylesheet" media="all">
</head>
<body>
<?php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $message = $_POST['message'];

    if($name=='') {
       print 'お名前が、入力されていません。<br>'."\n";
    } else {
       print 'ようこそ、'.$name.'様<br>'."\n";
    }
		
    if($email=='') {
       print 'メールアドレスが、入力されていません。<br>'."\n";
    } else {
       print 'メールアドレス:'.$email.'<br>'."\n";
    }
		
    if($message=='') {
       print 'お問い合わせの内容が、入力されていません。'."\n";
    } else {
       print 'お問い合わせの内容:'.$message."\n";
    }
?>
</body>
</html>
  • 「$name==''」は、「入力フィールドが空だったら」の意味
  • 出力時にHTML整形の目的で「"\n"」改行を展開させるため「ダブルクォーテーション」で記述する