フォーム部品

Copyright(C) 25Feb2014 coskx TNCT


ここではフォームの部品を紹介する。
紹介する部品は
（１）テキストボックス(input type="text")
（２）ラジオボタン(input type="radio")
（３）ポップアップリスト(select option)
（４）チェックボックス(input type="checkbox")
（５）複数行対応テキストボックス(textarea)
（６）実行ボタン(input type="submit")　これはすべての例で使われている。
である。

（１）テキストボックスの例


テキストボックスは1行分のテキストを記述できるようにするフォーム部品で，次のように扱う。
テキストボックスのプログラム例
<?php
    if (isset($_POST['username']) == true) {
        $yourname = htmlspecialchars($_POST['username'], ENT_QUOTES);
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php
    if ($firsttime == true) {
        print "あなたのお名前は？<br>\n";
        print "<form method=\"post\">\n";
        print "<input type=\"text\" size=\"30\" name=\"username\"><br>\n";
        print "<input type=\"submit\" name=\"status\" value=\"送信\">\n";
        print "</form>\n";

    } else {
        print $yourname . "　さん，こんにちは<br><br>";
        print "もう一度試しますか？<br>\n";
        print "<form method=\"post\">\n";
        print "<input type=\"submit\" name=\"status\" value=\"もう一度\">\n";
        print "</form>\n";
    }
?>

</body>
</html>
実行例　最初のページ

あなたのお名前は？
実行例　結果のページ

東京　太郎　さん，こんにちは

もう一度試しますか？


最初のページが表示された段階では，テキスト入力ボックスには，何も書いてない状態になっている。
もし最初からテキスト入力ボックスに「こんにちは」が記述してある状態で表示したいなら，次のようにすればよい。
print "<input type=\"text\" size=\"30\" name=\"username\" value=\"こんにちは\"><br>\n";

次のような表現もできるが，どちらが書きやすいか，読みやすいか考えてみよう。
<?php
    if (isset($_POST['username']) == true) {
        $yourname = htmlspecialchars($_POST['username'], ENT_QUOTES);
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php if ($firsttime == true) { ?>
    あなたのお名前は？<br>
    <form method="post">
    <input type="text" size="30" name="username"><br>
    <input type="submit" name="status" value="送信">
    </form>
<?php } else { ?>
    <?php print $yourname . "　さん，こんにちは<br><br>"; ?>
    もう一度試しますか？<br>
    <form method="post">
    <input type="submit" name="status" value="もう一度">
    </form>
<?php } ?>

</body>
</html>


（２）ラジオボタンの例


ラジオボタンは複数の選択肢から排他的に１つだけ選択できるようにするフォーム部品で，次のように扱う。
ラジオボタンのプログラム例 address.php
<?php
    if (isset($_POST['status']) && ($_POST['status'] == "送信")) {
        if(isset($_POST['userchoice'])) $userchoice = $_POST['userchoice'];
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php
    if ($firsttime == true) {
        print "住んでいるところを１つ選んでね<br><br>\n";
        print "<form  method=\"post\">\n";
        print "<input type=\"radio\" name=\"userchoice\" value=\"東京\">東京都<br>\n";
        print "<input type=\"radio\" name=\"userchoice\" value=\"神奈川\">神奈川県<br>\n";
        print "<input type=\"radio\" name=\"userchoice\" value=\"千葉\">千葉県<br>\n";
        print "<input type=\"radio\" name=\"userchoice\" value=\"埼玉\">埼玉県<br><br>\n";
        print "<input type=\"submit\" name=\"status\" value=\"送信\">\n";
        print "</form>\n";
    } else {
        if (isset($userchoice)) {
            print $userchoice . "　を選びましたね。<br><br>";
        } else {
            print "なにも選ばなかったですね。<br><br>";
        }
        print "もう一度試しますか？<br><br>\n";
        print "<form  method=\"post\">\n";
        print "<input type=\"submit\" name=\"status\" value=\"もう一度\">\n";
        print "</form>\n";
    }
?>

</body>
</html>
実行例　最初のページ
住んでいるところを１つ選んでね

東京都
神奈川県
千葉県
埼玉県
実行例　結果のページ
東京　を選びましたね。

もう一度試しますか？


最初のページが表示された段階では，どの項目も選択されていない状態になっている。
もし最初から「東京都」を選択した状態で表示したいなら，次のようにすればよい。

print "<input type=\"radio\" name=\"userchoice\" value=\"東京\" checked="checked">東京都<br>\n";


次のような表現もできるが，どちらが書きやすいか，読みやすいか考えてみよう。
<?php
    if (isset($_POST['status']) && ($_POST['status'] == "送信")) {
        if(isset($_POST['userchoice'])) $userchoice = $_POST['userchoice'];
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php if ($firsttime == true) { ?>
    住んでいるところを１つ選んでね<br><br>
    <form  method="post">
    <input type="radio" name="userchoice" value="東京">東京都<br>
    <input type="radio" name="userchoice" value="神奈川">神奈川県<br>
    <input type="radio" name="userchoice" value="千葉">千葉県<br>
    <input type="radio" name="userchoice" value="埼玉">埼玉県<br><br>
    <input type="submit" name="status" value="送信">
    </form>
<?php } else { ?>
    <?php
        if (isset($userchoice)) {
            print $userchoice . "　を選びましたね。<br><br>";
        } else {
            print "なにも選ばなかったですね。<br><br>";
        }
    ?>
    もう一度試しますか？<br><br>
    <form  method="post">
    <input type="submit" name="status" value="もう一度">
    </form>
<?php } ?>

</body>
</html>


攻撃に注意！
次のhtmlファイルは悪意を持ったもので，form中のaction=のところが，上記のaddress.phpになっているので，送信ボタンを押す と，「・・・を選びましたね。」のページに移行する。その時，name="userchoice"の箱にとんでもないものを送りつける例である。受け取っ たものはどのようなものでも，htmlspecialcharsを使って，中身を消毒する必要があることを示している。
悪意のプログラム例 address1.html
<html>
<body>
悪さをするページです<br>
<form  action="address.php" method="post">
<input type="hidden" name="userchoice" value="アメリカ合衆国<script>alert('悪さ成功。\njavascriptの動作に成功しました。\n何でもできてし まいますね。')</script>">
<input type="submit" name="status" value="送信">
</form>
</body>
</html>

この悪意を持ったhtmlは，address.phpと同じサーバではなく，どこにでも置くことができる。その場合action=""のところをフルURLになっていれば全く同じ振る舞いをする。

（３）チェックボックスの例


チェックボックスは複数の項目を選択できる（１つも選択しないことも許される）フォーム部品で，次のように扱う。
チェックボックスのプログラム例
<?php
    if (isset($_POST['status']) && ($_POST['status'] == "送信")) {
        if (isset($_POST['userchoice'])) $userchoice = $_POST['userchoice'];//配列で受け取っている
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php
    if ($firsttime == true) {
        print "選んでね。（１つも選ばなくても，複数選んでもいいよ。）<br><br>\n";
        print "<form method=\"post\">\n";
        print "<input type=\"checkbox\" name=\"userchoice[]\" value=\"東京\">東京都<br>\n";
        print "<input type=\"checkbox\" name=\"userchoice[]\" value=\"神奈川\">神奈川県<br>\n";
        print "<input type=\"checkbox\" name=\"userchoice[]\" value=\"千葉\">千葉県<br>\n";
        print "<input type=\"checkbox\" name=\"userchoice[]\" value=\"埼玉\">埼玉県<br><br>\n";
        print "<input type=\"submit\" name=\"status\" value=\"送信\">\n";
        print "</form>\n";
    } else {
        if (isset($userchoice)) {
            $num=count($userchoice);//配列要素の数を取得
            for ($i=0; $i<$num; $i++) {
                if ($i==0) print $userchoice[$i];
                else print "と".$userchoice[$i];
            }
            print "　を選びましたね。<br><br>";
        } else {
            print "なにも選ばなかったですね。<br><br>";
        }
        print "もう一度試しますか？<br><br>\n";
        print "<form method=\"post\">\n";
        print "<input type=\"submit\" name=\"status\" value=\"もう一度\">\n";
        print "</form>\n";
    }
?>

</body>
</html>
実行例　最初のページ
選んでね。（１つも選ばなくても，複数選んでもいいよ。）

東京都
神奈川県
千葉県
埼玉県
実行例　結果のページ
千葉と東京　を選びましたね。

もう一度試しますか？


最初のページが表示された段階では，どの項目も選択されていない状態になっている。
もし最初から「東京都」を選択した状態で表示したいなら，次のようにすればよい。


print "<input type=\"checkbox\" name=\"userchoice[]\" value=\"東京\" checked="checked">東京都<br>\n";

（４）ポップアップリストの例



ポップアップリストは複数の選択肢をポップアップリストとして表示し，その中から排他的に１
つだけ選択できるようにするフォーム部品で，次のように扱う。
ポップアップリストのプログラム例
<?php
    if (isset($_POST['status']) && ($_POST['status'] == "送信")) {
        $userchoice = $_POST['userchoice']; //必ず受け取れるのでチェックの必要なし
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php
    if ($firsttime == true) {
        print "選んでね。<br><br>\n";
        print "<form method=\"post\">\n";
        print "<select name=\"userchoice\">";
        print "<option value=\"東京\">東京都</option>\n";
        print "<option value=\"神奈川\">神奈川県</option>\n";
        print "<option value=\"千葉\">千葉県</option>\n";
        print "<option value=\"埼玉\">埼玉県</option>\n";
        print "</select><br><br>\n";
        print "<input type=\"submit\" name=\"status\" value=\"送信\">\n";
        print "</form>\n";
    } else {
        print $userchoice . "　を選びましたね。<br><br>";
        print "もう一度試しますか？<br><br>\n";
        print "<form method=\"post\">\n";
        print "<input type=\"submit\" name=\"status\" value=\"もう一度\">\n";
        print "</form>\n";
    }
?>

</body>
</html>
実行例　最初のページ

実行例　結果のページ



最初のページが表示された段階では，どの項目も選択されていない状態になっている。
もし最初から「東京都」を選択した状態で表示したいなら，次のようにすればよい。


print "<option value=\"東京\" selected="selected">東京都</option>\n";




（５）複数行対応テキストボックスの例



複数行対応テキストボックスは複数行のテキストの入力を行う領域であり，次のように扱う。
ただし，入力されるテキスト中に，HTMLのキーワードが含まれたり，javaスクリプトが書き
込まれたりした場合は，システムが危険になるので，記号をhtml用に変換する関数を使う
べきである。
複数行対応テキストボックスのプログラム例
<?php
    if (isset($_POST['status']) && ($_POST['status'] == "送信")) {
         $usertext = htmlspecialchars($_POST['usertext'], ENT_QUOTES);
        $firsttime = false;
    } else {
        $firsttime = true;
    }
?>

<html>
<body>

<?php
    if ($firsttime == true) {
        print "文章を入力してね<br><br>\n";
        print "<form method=\"post\">\n";
        print "<textarea name=\"usertext\" rows=\"6\" cols=\"80\"></textarea><br><br>\n";
        print "<input type=\"submit\" name=\"status\" value=\"送信\">\n";
        print "</form>\n";
    } else {
        print $usertext."<br><br>\n";
        print "と書きましたね。<br><br>";
        print "もう一度試しますか？<br><br>\n";
        print "<form method=\"post\">\n";
        print "<input type=\"submit\" name=\"status\" value=\"もう一度\">\n";
        print "</form>\n";
    }
?>

</body>
</html>
実行例　最初のページ

実行例　結果のページ



最初のページが表示された段階では，何も書いてない状態になっている。
もし最初から「こんにちは」が記述してある状態で表示したいなら，次のようにすればよい。
print "<textarea name=\"usertext\" rows=\"6\" cols=\"80\">\"こんにちは\"</textarea><br><br>\n";