くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[PHP]入力フォーム③

入力フォーム2

名前、メールアドレス、お問い合わせ内容を記入できるフォームを作成します。

今回は入力確認画面、送信後の画面、そして指定されたアドレスへの通知メールも実装します。

 

使用するファイル
・index.php(入力フォーム) 
・check.php(確認画面)
・send.php(送信後用の画面)

 

 

入力フォーム2−1 入力フォームをHTMLで記述

今回はtableタグ、labelタグを使用します。

labelタグのforをid属性と紐づけると、各項目をクリックすると入力フォームに自動的にカーソルが移るので便利。

 

使用する属性:name属性、id属性(それぞれ「name」「email」「msg」を使用)

データの送信方式:POSTメソッド
 

f:id:pleasure10501:20150609204923p:plain

 

 

 

 

 

 

 

 

【index.php】(body内)

<h1>お問い合わせフォーム</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form action="check.php" method="post">
<table>
<tr><th><label for="name">お名前:</label></th><td><input type="text" name="name" id="name"></td></tr>
<tr><th><label for="email">メールアドレス:</label></th><td><input type="text" name="email" id="email"></td></tr>
<tr><th><label for="msg">お問い合わせ内容:</label></th><td><textarea name="msg" id="msg"></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>

 

入力フォーム2−2 確認画面を作成

入力されたデータを確認するためのcheck.phpを作成します。
まずは ①入力値を表示する為のHTMLを整えて
次に  ②入力値が表示されるようにPHPのコードを書きます

 

f:id:pleasure10501:20150609210407p:plain

①【check.php】(body内)

 

 <p>以下の内容が入力されました。</p>
 <table>
 <tr><th>お名前:</th><td></td></tr>
 <tr><th>メールアドレス:</th><td></td></tr>
 <tr><th>お問い合わせ内容:</th><td></td></tr>
 </table>
 <a href="#">送信する</a>

 

○データの送信先はsend.phpというファイルなので、「送信する」は次の通りになる

 <a href="send.php">送信する</a>

 

 

②【check.php】(head内)

index.phpのすべての入力欄で値があるかどうか調べる。
値がなければindex.phpに戻るコードを書く。

 

 if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['msg']) ) {
    header( 'Location:./index.php' );
      exit;
 }

 

||は「又は」を表す記号。 
1行目「もし $_POST['name'] または $_POST['email'] 又は $_POST['msg']の値がなければ」
2行目「index.phpに遷移する」
3行目「この処理はそれで終了」

 

③入力値を表示する

1)isset関数の下に、$_POST['']の値をシンプルにする変数を追加する

 $name = $_POST['name'];
 $email = $_POST['email'];
 $msg = $_POST['msg'];

 

2)HTMLのtdタグ内に、変換した変数を表示するPHPのコードを書く。
このときタグやアンカーリンクを無効にするhtmlspecialchars関数を忘れないように。

 <p>以下の内容が入力されました。</p>
 <table>
 <tr><th>お名前:</th><td><?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?></td></tr>
 <tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?></td></tr>
 <tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></td></tr>
 </table>

 

テストとしてアンカーリンク付きのテキストを入力して送信してみる。
リンクが無効になっていれば機能している証拠。

f:id:pleasure10501:20150609213500p:plainf:id:pleasure10501:20150609213506p:plain