Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。
![お電話でお気軽にお問い合わせくださいTel 03-6805-2904 営業時間 [平日]AM 9:30 - PM 6:30](../../../resources/images/tel.gif)
フォームへの埋め込み
フォームへの埋め込みについて
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年生のボタンをクリックしたときの実行結果
- 2年生のボタンをクリックしたときの実行結果
- 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"); ?> />
