パソコンQ&A

基本的なフォームの作り方

フォームを作るときの基本は
(1)入力画面
(2)確認画面
(3)受付完了画面

(1)から(2)に行くときに入力エラーなどがあれば表示させる。

たとえば上の(1)〜(3)をinput1.php、input2.php、input3.phpのファイルにした場合
入力ミスなどのチェックをしてエラーであったとすると(2)で『エラーです』と表示させて、
ユーザーに(1)に戻ってもらう必要がある。
このようにするより1つのファイルの中ですべてを行うほうがユーザーにも親切だと思います。

ここで名前を登録するだけのフォームを作ってみます。

HTMLは次のようになります。
ページ(1)

<html>
<body>
<form name="form" action="【次のページ】" method="post">
名前<input type="text" name="onamae" />
<input type="submit" value="確認画面へ" />
</form>
</body>
</html>


ページ(2)

<html>
<body>
名前 <?=$onamae?>
<form name="form" action="【次のページ】" method="post">
<input type="hidden" name="onamae" value="<?=$onamae?>" />
<input type="submit" value="送信" />
</form>
</body>
</html>


ページ(3)

<html>
<body>
ありがとうございました。
</body>
</html>


PHPでは送信元のファイルと送信先のファイルが同じ場合は
(自分自身のアドレスを表す)

<?=$_SERVER['PHP_SELF']?>

です。
そこで【次のページ】の部分は<?=$_SERVER['PHP_SELF']?>となります。

ページ(2)で

<input type="hidden" name="onamae" value="<?=$onamae?>" />

というのは画面上には表示されないけど、フォームとしては送信したいときに使います。

またフォーム送信ではSUBMITボタンにもNAME属性を持たせることができます。
これによってどのボタンが押されたのかわかります。
送られる値はボタンの表示文字です。

<input type="submit" name="submit1" value="送信" />

とすると$_POST["submit1"]に送られる値は『送信』となります。
押されていないボタンの値は送信されません。
BUTTONタグでは、IEのバグがあるので1つのFORMタグ内には1つのBUTTONタグしか使えません。
複数のボタンを設置するときはINPUT TYPE=SUBMITを使いましょう。
[参考記事] BUTTONタグのInternet Explorerバグ

ちなみにBUTTONタグとは

<input type="button" />

ではなくて

<button></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を使用するときは絶対に次のものは使ってはいけません。

<input type="button" onClick="javascript:〜" />

これではJavaScriptが使えないユーザーは次へ行けません。

<form onSubmit="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>

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net