フォームを作るときの基本は
(1)入力画面
(2)確認画面
(3)受付完了画面
(1)から(2)に行くときに入力エラーなどがあれば表示させる。
たとえば上の(1)〜(3)をinput1.php、input2.php、input3.phpのファイルにした場合
入力ミスなどのチェックをしてエラーであったとすると(2)で『エラーです』と表示させて、
ユーザーに(1)に戻ってもらう必要がある。
このようにするより1つのファイルの中ですべてを行うほうがユーザーにも親切だと思います。
ここで名前を登録するだけのフォームを作ってみます。
HTMLは次のようになります。
ページ(1)
<body>
<form name="form" action="【次のページ】" method="post">
名前<input type="text" name="onamae" />
<input type="submit" value="確認画面へ" />
</form>
</body>
</html>
ページ(2)
<body>
名前 <?=$onamae?>
<form name="form" action="【次のページ】" method="post">
<input type="hidden" name="onamae" value="<?=$onamae?>" />
<input type="submit" value="送信" />
</form>
</body>
</html>
ページ(3)
<body>
ありがとうございました。
</body>
</html>
PHPでは送信元のファイルと送信先のファイルが同じ場合は
(自分自身のアドレスを表す)
です。
そこで【次のページ】の部分は<?=$_SERVER['PHP_SELF']?>となります。
ページ(2)で
というのは画面上には表示されないけど、フォームとしては送信したいときに使います。
またフォーム送信ではSUBMITボタンにもNAME属性を持たせることができます。
これによってどのボタンが押されたのかわかります。
送られる値はボタンの表示文字です。
とすると$_POST["submit1"]に送られる値は『送信』となります。
押されていないボタンの値は送信されません。
BUTTONタグでは、IEのバグがあるので1つのFORMタグ内には1つのBUTTONタグしか使えません。
複数のボタンを設置するときはINPUT TYPE=SUBMITを使いましょう。
[参考記事] BUTTONタグのInternet Explorerバグ
ちなみにBUTTONタグとは
ではなくて
のことです。
これをまとめると次のようになります。
//どのボタンが押されたのかを判別します。
$submit1 = (isset($_POST["submit1"]))? $_POST["submit1"] : "";
$submit2 = (isset($_POST["submit2"]))? $_POST["submit2"] : "";
//フォームの入力内容を受け取ります。
$onamae = (isset($_POST["onamae"]))? $_POST["onamae"] : "";
//ユーザーが入力したものを画面に表示させるときは必ずHTMLタグをエスケープします。
$onamae = htmlspecialchars($onamae);
//ページの共通部分はまとめます。
?>
<html>
<body>
<?if($submit2!=""){?>
ありがとうございました。
<?}elseif($submit1!=""){?>
名前 <?=$onamae?>
<form name="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="onamae" value="<?=$onamae?>" />
<input type="submit" name="submit2" value="送信" />
</form>
<?}else{?>
<form name="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
名前<input type="text" name="onamae" />
<input type="submit" name="submit1" value="確認画面へ" />
</form>
<?}?>
</body>
</html>
これではなにも入力しないでも送信が完了してしまいます。
また(2)から(3)の間にエラーがあった場合でも
『ありがとうございました。』
と表示されるのはあまりよくない。
そこでメッセージをまとめてみます。
またMacIEなどではページ(3)でリロードして、空POSTを送ることが出来ます。
ページ(2)とページ(3)の2重チェックをしましょう。
$msg="";
$submit1 = (isset($_POST["submit1"]))? $_POST["submit1"] : "";
$submit2 = (isset($_POST["submit2"]))? $_POST["submit2"] : "";
$onamae = (isset($_POST["onamae"]))? $_POST["onamae"] : "";
//submit1の時だけではなくsubmit2のときもチェックをします。
//悪意のあるユーザーは確認画面のHTMLから自作でページを作り
//submit2にどんなデータでも送ることができます。
if($submit1!="" || $submit2!=""){
if($onamae==""){
//エラー表示を$msg変数に追記します。
$msg.="名前を入力してください。";
//エラーであれば初期画面に戻ります。
$submit1="";
$submit2="";
}
//いくつか入力がある場合はここでチェックをします。
}
if($submit2!=""){
//ここでデータベースに登録したり、メールを送ったりなどの
//フォーム目的の処理をします。
//OKであればサンクス表示をを$msg変数に追記します。
$msg.="ありがとうございました。";
}elseif($submit1!=""){
}else{
}
$onamae = htmlspecialchars($onamae);
?>
<html>
<body>
<?
if($msg!=""){
echo $msg;
}
?>
<?if($submit2!=""){?>
<?}elseif($submit1!=""){?>
名前 <?=$onamae?>
<form name="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="onamae" value="<?=$onamae?>" />
<input type="submit" name="submit2" value="送信" />
</form>
<?}else{?>
<form name="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
名前<input type="text" name="onamae" />
<input type="submit" name="submit1" value="確認画面へ" />
</form>
<?}?>
</body>
</html>
確認画面で間違っていることに気づいたユーザーのために『戻る』ボタンを設置します。
またJavaScriptでのチェックを含めてみます。
JavaScriptの使えないユーザーもいるのでスクリプト内でのチェックは必須です。
ではスクリプト内でチェックをしているのになぜJavaScriptを使うのかと言われそうですが、
回線の遅いユーザーは入力のチェックのたびにサーバーと通信しなければいけなくなりますし、
サーバー負荷などを考えてもユーザー側(クライアント側)でもチェックをするほうがいいです。
JavaScriptを使用するときは絶対に次のものは使ってはいけません。
これではJavaScriptが使えないユーザーは次へ行けません。
FORMタグ内にonSubmitで設置します。
$msg="";
$submit1 = (isset($_POST["submit1"]))? $_POST["submit1"] : "";
$submit2 = (isset($_POST["submit2"]))? $_POST["submit2"] : "";
$back = (isset($_POST["back"]))? $_POST["back"] : "";
if($back!=""){
$submit1="";
$submit2="";
}
$onamae = (isset($_POST["onamae"]))? $_POST["onamae"] : "";
if($submit1!="" || $submit2!=""){
if($onamae==""){
$msg.="名前を入力してください。";
$submit1="";
$submit2="";
}
}
if($submit2!=""){
$msg.="ありがとうございました。";
}elseif($submit1!=""){
}else{
}
$onamae = htmlspecialchars($onamae);
?>
<html>
<body>
<?
if($msg!=""){
echo $msg;
}
?>
<?if($submit2!=""){?>
<?}elseif($submit1!=""){?>
名前 <?=$onamae?>
<form name="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="onamae" value="<?=$onamae?>" />
<input type="submit" name="submit2" value="送信" />
<input type="submit" name="back" value="戻る" />
</form>
<?}else{?>
<form name="form" action="<?=$_SERVER['PHP_SELF']?>" method="post" onSubmit='return forminput();'>
名前<input type="text" name="onamae" />
<input type="submit" name="submit1" value="確認画面へ" />
</form>
<script type='text/javascript'>
<!--//
function forminput() {
if(document.form.onamae.value==""){
alert("名前を入力してください。");
return false;
}
}
//-->
</script>
<?}?>
</body>
</html>