Webサイトデザイン制作Tips|Webあんぎゃ

Webサイトデザイン制作における基礎知識を中心に記載しています。
内容は2013/6/7より受講している求職者支援訓練「Webサイト制作科」の授業に基づいています。

 | 

2013-09-11

Webサイト制作におけるPHPでのフォーム作成(その1.5:$_POSTを追いかける)

Webサイト制作において、問い合わせフォームなどを作る際に、ユーザーからの入力データを、ページを跨いで使いたい場合がある。

入力データを保持するスパーグローバル変数として、今後習うセッションというものがあるようだが、セッションを使わずにページを跨いでデータを保持(送る)方法と、その際の「$_POST」の挙動を確認するべく、「$_POST」の中身を追いかけてみる。

今回の検証におけるページ遷移は下記の通り。
入力フォームページ:inputpage.php
→ チェックページ1:checkpage1.php
→ チェックページ2:checkpage2.php
サンクスページ:thankspage.php
※今回は検証用なので、ページ名とページの機能(役割)との関連は無視している

入力フォームページ

以下、入力フォームページのコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力フォームページ</title>
</head>
<body>
<?php
//$_POST内のデータ数と中身確認
$i = 0; 
foreach($_POST as $key => $value){
 print 'キー名=「'.$key.'」、値=「'.$value.'」<br>'."\n";
 $i++;
}
print '$_POSTの中には「'.$i.'個」のデータが入っています。<br>'."\n";
?>
<div>
  <form  action="checkpage1.php" method="POST">
    <label for="test1">テスト1</label>
    <input type="text" name="test1" size="60" id="test1" class="text1"><br>
    <label for="test2">テスト2</label>
    <input type="text" name="test2" size="60" id="test2" class="text1"><br>
    <input type="submit" value="確認画面へ">
  </form>
</div>
</body>
</html>

入力欄テスト1と入力欄テスト2にhtmlタグを含むテキストを入力する。

以下、表示結果。
f:id:porco_webangya:20130912024629j:image:w620

  • 「$_POST」の初期状態には何も入っていないことが分かる。


「確認画面へ」ボタンを押して、次のページへデータを送る。

チェックページ1

以下、チェックぺージ1のコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックページ1</title>
<style>
h3 {
 border-bottom: 1px solid #CCC;
 margin-bottom: 0;
 padding-bottom: 0;
}
span {
 color:#F00;
}
</style>
</head>
<body>
<?php
$i = 0; 
foreach($_POST as $key => $value){
 print 'キー名=「'.$key.'」、値=「'.$value.'」<br>'."\n";
 $i++;
}
print '$_POSTの中には「'.$i.'個」のデータが入っています。<br>'."\n";
?>
<?php
//不正入力防止のため各$_POSTのデータをhtmlspecialcharsで変換し、変換後のデータを変数に代入する  
  $test1= htmlspecialchars($_POST['test1']); //不正入力防止のため、htmlspecialcharsで変換する
  $test2= htmlspecialchars($_POST['test2']); //不正入力防止のため、htmlspecialcharsで変換する

//$_POSTのデータに対するhtmlspecialcharsでの変換前後の違い(中身)を確認するため出力する 
  print '<h3>$_POSTデータをhtmlspecialcharsで変換後のデータ確認</h3><br>'."\n"; 
  print '$test1='.$test1.'<br>'."\n"; 
  print '$test2='.$test2.'<br>'."\n"; 
  
//次ページへデータを送るためのフォーム作成  
  print '<form action="checkpage2.php" method="POST">'."\n"; 
  print '<input type="hidden" name="test0" value="'.$_POST['test1'].'">'."\n"; 
  print '<input type="hidden" name="test1" value="'.$test1.'">'."\n"; 
//  print '<input type="hidden" name="test2" value="'.$test2.'">'."\n"; 
  print '<h3>新規入力欄</h3><br>'."\n";
  print '<label for="sample1">サンプル1</label>'."\n".'<input type="text" name="sample1" size="60" id="sample1"><br>'."\n"; 
  print '<label for="sample2">サンプル2</label>'."\n".'<input type="text" name="sample2" size="60" id="sample2"><br>'."\n"; 

  print '<input type="button" onClick="history.back()" value="戻る">'."\n";
  print '<input type="submit" value="送信">'."\n";
  print '</form>'."\n";

?>
</body>
</html>

入力欄サンプル1と入力欄サンプル2にhtmlタグを含むテキストを入力する。

上記コード中のinputタグのtype属性値に「hidden」を指定することで、非表示のデータを送信することができる。
これにより、入力フォームページから送られてきたデータをそのまま次のページへ送ることができる。

<input type="hidden" name="キー名" value="送りたい値(データ)"> 

※参照http://www.htmq.com/html/input_hidden.shtml

以下、表示結果。
f:id:porco_webangya:20130912024924j:image:w620

  • 送られてきたデータに含まれているhtmlタグがタグとして認識され、機能していることが分かる。
  • htmlspecialcharsで変換すると、入力されたhtmlタグが文字として認識され、タグとして機能していないことが分かる。
  • 次ページへデータを送る処理(inputタグのtype属性値"hidden")を行わなかった場合の結果を見るため、テスト2の入力データ($_POST['test2')はあえて送らない。
  • テスト1への入力データを$_POSTのデータのまま送る場合(name属性値をtest0とした)と、htmlspecialcharsで変換した状態で送る場合(name属性値test1とした)とで違いがあるのかを次ページで確かめる。


「送信」ボタンを押して、次のページへデータを送る。

チェックページ2

以下、チェックぺージ2のコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックページ2</title>
<style>
h3 {
 border-bottom: 1px solid #CCC;
 margin-bottom: 0;
 padding-bottom: 0;
}
span {
 color:#F00;
}
</style>
</head>

<body>
<?php
$i = 0; 
foreach($_POST as $key => $value){
 print 'キー名=「'.$key.'」、値=「'.$value.'」<br>'."\n";
 $i++;
}
print '$_POSTの中には「'.$i.'個」のデータが入っています。<br>'."\n";
?>
<?php

//$_POST['test2']の中身を確認
  if($_POST['test2']==NULL){
	print '<p>$_POST["test2"]はNULLです。<p>'."\n";  
  }
  else if($_POST['test2']==''){
	print '<p>$_POST["test2"]は空文字です。<p>'."\n";    
  }
  else {
	print '<p>$_POST["test2"]は空文字でもNULLでもありません。<p>'."\n";      
  }
  
//不正入力防止のため各$_POSTのデータをhtmlspecialcharsで変換し、変換後のデータを変数に代入する
  $test0= htmlspecialchars($_POST['test0']); 
  $test1= htmlspecialchars($_POST['test1']); 
  $test2= htmlspecialchars($_POST['test2']); 
  $sample1= htmlspecialchars($_POST['sample1']); 
  $sample2= htmlspecialchars($_POST['sample2']); 

//$_POSTのデータに対するhtmlspecialcharsでの変換前後の違い(中身)を確認するため出力する
  print '<h3>$_POSTデータをhtmlspecialcharsで変換後のデータ確認</h3><br>'."\n";
  print '$test0='.$test0.'<br>'."\n";
  print '$test1='.$test1.'<br>'."\n";
  print '$test2='.$test2.'<br>'."\n";
  print '$sample1='.$sample1.'<br>'."\n";
  print '$sample2='.$sample2.'<br>'."\n";

//次ページへデータを送るためのフォーム作成  
  print '<form action="thankspage.php" method="POST">'."\n";
  
  print '<input type="hidden" name="test0" value="'.$_POST['test0'].'">'."\n";
  print '<input type="hidden" name="test1" value="'.$test1.'">'."\n";
  print '<input type="hidden" name="test2" value="'.$test2.'">'."\n";
  print '<input type="hidden" name="sample1" value="'.$sample1.'">'."\n";
//  print '<input type="hidden" name="sample2" value="'.$sample2.'">'."\n";

  print '<input type="button" onClick="history.back()" value="戻る">'."\n";
  print '<input type="submit" value="送信">'."\n";
  print '</form>'."\n";
?>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130912025122j:image:w620

  • 次ページへデータを送る処理(inputタグのtype属性値"hidden")を行わなかったテスト2の入力データ($_POST['test2'])がなくなっていることが分かる。
  • htmlタグを含むデータ(テスト1への入力データ)をhtmlspecialcharsで変換した状態で送っても、$_POST内では未変換と同じ状態になっている(で送られる)ことが分かる。つまり、ページを移動する度にhtmlspecialcharsで変換する必要があると考えられる。


「送信」ボタンを押して、次のページへデータを送る。

サンクスページ

以下、サンクスページのコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンクスページ</title>
<style>
h3 {
 border-bottom: 1px solid #CCC;
 margin-bottom: 0;
 padding-bottom: 0;
}
span {
 color:#F00;
}
</style>
</head>
<body>
<?php
$i = 0; 
foreach($_POST as $key => $value){
 print 'キー名=「'.$key.'」、値=「'.$value.'」<br>'."\n";
 $i++;
}
print '$_POSTの中には「'.$i.'個」のデータが入っています。<br>'."\n";
?>
<?php
//$_POST['test2']の中身を確認
  if($_POST['test2']==NULL){
	print '<p>$_POST["test2"]はNULLです。<p>'."\n";  
  }
  else if($_POST['test2']==''){
	print '<p>$_POST["test2"]は空文字です。<p>'."\n";    
  }
  else {
	print '<p>$_POST["test2"]は空文字でもNULLでもありません。<p>'."\n";      
  }
  
  //$_POST['sample2']の中身を確認
  if($_POST['sample2']==NULL){
	print '<p>$_POST["sample2"]はNULLです。<p>'."\n";  
  }
  else if($_POST['sample2']==''){
	print '<p>$_POST["sample2"]は空文字です。<p>'."\n";    
  }
  else {
	print '<p>$_POST["sample2"]は空文字でもNULLでもありません。<p>'."\n";      
  }
  
//不正入力防止のため各$_POSTのデータをhtmlspecialcharsで変換し、変換後のデータを変数に代入する
  $test0= htmlspecialchars($_POST['test0']);
  $test1= htmlspecialchars($_POST['test1']);
  $test2= htmlspecialchars($_POST['test2']);
  $sample1= htmlspecialchars($_POST['sample1']);
  $sample2= htmlspecialchars($_POST['sample2']);

//$_POSTのデータに対するhtmlspecialcharsでの変換前後の違い(中身)を確認するため出力する
  print '<h3>$_POSTデータをhtmlspecialcharsで変換後のデータ確認</h3><br>'."\n";
  print '$test0='.$test0.'<br>'."\n";
  print '$test1='.$test1.'<br>'."\n";
  print '$test2='.$test2.'<br>'."\n";
  print '$sample1='.$sample1.'<br>'."\n";
  print '$sample2='.$sample2.'<br>'."\n";
?>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130912025219j:image:w620

  • チェックページ2から送られてきた$_POSTの中にキー名「test2」が入っていることから、値が「NULL」でもキー名を指定して送る処理(inputタグのtype属性値"hidden")をすれば、キー名(name属性値)は$_POSTに入っていることが分かる。

aaaaaa 2015/04/28 18:18 aaaa

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/porco_webangya/20130911/1378925011
リンク元
 |