お問い合わせ入力フォーム(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"」改行を展開させるため「ダブルクォーテーション」で記述する