フォームへの埋め込み

htmlとphpスクリプト

phpスクリプトの埋め込み

htmlで作成したhtmlファイルのページは、人間の手で変更を加えない限り、内容などが変化することはありません。ですが、htmlのページにphpのスクリプトを埋めこめば、設定した条件などによって「動的」なページを作成することが可能です。

htmlファイルにphpのスクリプトを埋めこむ場合には下記のようないくつかの約束ごとがあります。

  • phpのスクリプトの箇所は<?php?>と囲む
  • ファイルの拡張子は「php」とする

htmlへのphpスクリプトの埋め込み

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang ="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>学年</title>
    </head>
    <body>
    <form method="GET" action="13-01-01.php">

        <p>下にあるボタンをクリックしてください。</p>

        <input type="submit" value="1年生" name="school_year">
        <input type="submit" value="2年生" name="school_year">
        <input type="submit" value="3年生" name="school_year">

        <p>
        <?php
            if (isset($_GET["school_year"])) {
                if ($_GET["school_year"] == "1年生") {
                    echo ("僕は1年生です。\n");
                }   else if ($_GET["school_year"] == "2年生") {
                    echo ("私は2年生です。\n");
                }   else if ($_GET["school_year"] == "3年生") {
                    echo ("僕は3年生です。\n");
                }
            }
        ?>
        </p>

    </form>
    </body>
    </html>
    

1年生のボタンをクリックしたときの実行結果

1年生のボタンをクリックしたときの実行結果

2年生のボタンをクリックしたときの実行結果

2年生のボタンをクリックしたときの実行結果

3年生のボタンをクリックしたときの実行結果

3年生のボタンをクリックしたときの実行結果

上記のスクリプトの<?phpから?>がphpのスクリプト部分となります。inputタグのvalueの値がスクリプトの条件、nameがGET送信される名前となります。action="13-01-01.php"には実際にスクリプト処理をさせるファイル名を入力します。

上記のスクリプトではそれぞれのボタンをクリックすると「echo」の各メッセージが表示されます。

データの渡し方

formでhtmlのファイルから違う名前のファイルやそのファイルのみでデータを受け渡す時は、methodの属性を決定します。

methodにGETを指定

method="GET"

上記スクリプトのGETはデータの受け渡しをする場合に、URLのファイル名の後に「?」でデータが繋がり送信されます。これは視覚的に送信するデータを確認できるというメリットはありますが、送信をする文字列に限界があるので、大きなデータを扱う場合には向きません。画像や動画など、大きなデータを扱う場合にはPOSTを使用します。POSTはURLを使用しないので、大きなデータを扱うのに向いています。ですが、暗号化などの処理がなされて送信されるわけではありませんので、第三者に漏れてはいけないものを送信する場合にはSSL通信(暗号化通信)などと併用することが望ましいでしょう。

テキストフィールド

テキストフィールド

名前やメールアドレス、会員IDなどのデータを登録する場合などはテキストフィールドを使用します。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang ="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>テキストフィールド</title>
    </head>
    <body>
    <form method="GET" action="13-01-02.php">

        <input type="text" name="text-field01" />
        <input type="submit" value="送信" witdh="50" /><br />
        <input type="text" value="<?echo $_GET["text-field01"]; ?>" />

    </form>
    </body>
    </html>
    

実行結果

送信ボタンをクリックし、データを送信

送信ボタンをクリックした実行結果

データが受け渡された

上記スクリプトでは、「送信」ボタンをクリックしたときに2段目のテキストフィールドにデータが受け渡されているのがわかります。このようにテキストフィールドにデータを受け渡す場合は、「value="<?echo $_GET["text-field01"];」のようにvalueを使用します。

ラジオボタンとチェックボックス

ラジオボタン

ユーザー登録などをする場合には、ラジオボタンで性別を選択することがあります。

ボタンをクリックし、ラジオボタンのチェックを変更

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang ="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>ラジオボタン</title>
    </head>
    <body>
    <form method="GET" action="13-01-03.php">

        <input type="radio" name="sex" <? if (isset($_GET["man"])) echo ("checked"); ?> value="01" />男性
        <input type="radio" name="sex" <? if (isset($_GET["woman"])) echo ("checked"); ?> value="02" />女性

        <input type="submit" value="男性用ボタン" name="man" />
        <input type="submit" value="女性用ボタン" name="woman" />

    </form>
    </body>
    </html>
    

男性用ボタンをクリック

男性用ボタンをクリック

女性用ボタンをクリック

女性用ボタンをクリック

上記スクリプトでは、各性別のボタンをクリックしたときに、それぞれのラジオボタンのチェックが動的に変化します。ここでの「echo ("checked");」はボタンをクリックしたときのチェック表示を表しています。

チェックボックス

チェックボックスは複数選択のチェックなどに使用されます。

フラグ選択によるチェック

    <html xml:lang ="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>チェックボックス</title>
    </head>
    <body>
    <form method="GET" action="13-01-04.php">

        <input type="checkbox" value="check_on" name="check_flag01"
        <? if (isset($_GET["check_flag01"]) and $_GET["check_flag01"] == "check_on") echo ("checked"); ?> />
        配信メールを希望する。<br />

        <input type="checkbox" value="check_on" name="check_flag02"
        <? if (isset($_GET["check_flag02"]) and $_GET["check_flag02"] == "check_on") echo ("checked"); ?> />
        配信メールを希望しない。<br />

        <input type="checkbox" value="check_on" name="check_flag03"
        <? if (isset($_GET["check_flag03"]) and $_GET["check_flag03"] == "check_on") echo ("checked"); ?> />
        すでに配信メールを受けている。<br />

    </form>
    </body>
    </html>
    

実行結果

実行結果

URLの後に「?check_flag01=check_on&check_flag」を入力

「配信メールを希望する。」にチェックボックス

URLの後に「?check_flag02=check_on&check_flag」を入力

「配信メールを希望しない。」にチェック

URLの後に「?check_flag03=check_on&check_flag」を入力

「すでに配信メールを受けている。」にチェック

下記がphpスクリプトの埋め込み部分になります。URLの後に「?check_flag01=check_on&check_flag」、「?check_flag02=check_on&check_flag」、「?check_flag02=check_on&check_flag」、「?check_flag03=check_on&check_flag」、をそれぞれ入力すると各チェックボックスにチェックがなされるはずです。

これは各対応するフラグにチェックボックスが反応してチェックが切り替わっています。

<? if (isset($_GET["check_flag01"]) and $_GET["check_flag01"] == "check_on") echo ("checked"); ?> />