検証機能付きフォームを作ってみよう!

今回は、空欄と20文字以内というルールでの入力を検証するフォーム。htmlタグの前のphp部分で入力検証を行う。

【PHP】

<?php

//ポスト内容を取得し、入力値が正しいか検証する

$menu = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST'){

    $menu = $_POST['menu'];

    if (mb_strlen($menu) === 0){

        $err = '文字を入力してください。';

    }elseif (mb_strlen($menu) > 20){

        $err = '20文字以内で入力してください。';

    }  

}

?>

<html>

<head>

<style type="text/css">

.conter{

text-align:center;

}

input{

margin:5px;

}

</style>

</head>

<body>

    <div class="center">

        <h1>検証機能付き・ご注文フォーム</h1>

        <p>

            <?php

            //入力内容に誤りがあればエラーメッセージを、正しければ「あなたの食べたいメニューは~です」と表示する

            if (isset($err)){

                echo $err;

            }else{

                echo 'あなたが食べたいメニューは'.$menu.'です。';

            }

            ?>

        </p>

        <form action="" method="POST">

            <label>食べたいメニュー</label>

            <input type="text" name="menu"><br>

            <input type="submit">

        </form>

    </div>

</body>

</html>


【ポイント】

・mb_strlen( ) は文字列の長さを取得する関数。mb=マルチバイト=日本語文字として文字数をカウントする。

・isset( )は括弧内の変数に値がセットされているかを調べるコード。

・プログラムをスタートした初回に、「変数●●が見つかりません」というエラーが出てしまうのを防ぐために、先に$menuに空文字を入れておく。(変数は値が入った時点で存在がはじまる。)

・$_SERVERはスーパーグローバル関数(自動で生成される)。いろいろな情報を得られるが、今回はREQUEST_METHODを指定して、データがPOSTされている時だけ処理が動くようにしている。

・終盤のformタグのaction=""とすることで、ボタンを押すとデータをPOSTして自ページの処理をするという流れになる。


【ブラウザ】

●初期画面 ⇒ 入力なしで送信

●文字を20以上入力して送信

●正常に動作したとき

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA