ポンクソフト

フォームの基本 - PHP入門

前ページ　 PHP入門 TOP　次ページ

目次

このページの内容

はじめに
フォームの概要
テキストボックス
パスワード
ラジオボタン
チェックボックス
ファイル
隠しフィールド
サブミットボタン
選択リストボックス
テキストエリア

はじめに

ウェブサイトを見ている人がウェブサーバに情報を送信する仕組みとして、最もよく使われるものがフォームです。フォームの概要とフォームで使われるさまざまなフォーム部品を、この章で詳しく解説して行きます。

フォームの概要

フォームは、「テキストボックス」や「ラジオボタン」等のフォーム部品をまとめてformタグで囲むことによって作成します。

フォームの書式


<form action="a.php" method="post">

  フォーム部品 1

  フォーム部品 2

  ・・・

</form>

「action」属性でフォームで入力したデータの送り先を指定します。「method」属性でデータの送り方を指定します。ここには「get」または「post」が入ります。

GETメソッドのサンプル

フォームからデータを受け渡す仕組みを、簡単な例で示します。以下のプログラムは、テキストボックスに何か書いて送信ボタンを押すと、form1.phpがそのデータを受け取って表示します。

form1.html


<form action="form1.php" method="get">

  <input type="text" name="message">

  <input type="submit">

</form>

form1.php


<?php

  echo htmlspecialchars($_GET['message']);

?>

form1.htmlの実行結果

別ページで開く

formタグは、サブミットボタン（送信ボタン）が押されたときにaction属性で指定されたURLにフォームのデータを渡すようになっています。GETメソッドの場合は、PHPが最初から用意している変数（スーパーグローバル変数と言います）の「$_GET」配列にフォーム部品のname属性で指定した値をキーとしてデータが入る仕組みになっています。今回はテキストボックスのname属性の値が「message」なので、その情報は$_GET['message']で受け取ることができます。

フォームから受け取った文字列を表示する場合は、必ずhtmlspecialchars関数などを通してHTMLの特殊文字を無効化してください。さもないとXSS（クロスサイトスクリプティング）の脆弱性が発生します。

送信ボタンを押した後のURLを見ると、「form1.php?message=Hello」このようにファイル名の後にフォームから送られたデータが付加されます。

GETメソッドでパラメータを送る場合の構文は以下のようになります。


URL?フォーム部品名1=データ1&フォーム部品名2=データ2…

「?」の後ろにname属性で指定したフォーム部品名を書き、その部品の実際の値を「=」で繋げて書きます。複数の部品がある場合は、部品名と値の組を「&」で繋げます。「form1.php?message=Hello」の意味は、フォーム部品名「message」の書き込み内容が「Hello」だということです。

POSTメソッドのサンプル

続いて、POSTメソッドでデータを送る例を示します。以下のソースでformタグのmethod属性がpostになっている以外はform1.htmlと同じです。

form2.html


<form action="form2.php" method="post">

  <input type="text" name="message">

  <input type="submit">

</form>

form2.php


<?php

  echo htmlspecialchars($_POST['message']);

?>

form2.htmlの実行結果

別ページで開く

POSTメソッドの場合はスーパーグローバル変数「$_POST」配列にフォームのデータが入ります。

送信ボタンを押した後のURLを見ると、フォームの情報が付加されていません。POSTメソッドの場合もフォームのデータは送られるのですが、URLに付加はされないのです。

GETメソッドとPOSTメソッドの使い分け

GETメソッドとPOSTメソッドのメリット・デメリットを示します。

メソッド	メリット	デメリット
GET	ブックマークに登録などすると、再度開いたときにフォームデータ付きのページが再現できる。	送られたフォームデータを簡単に見られてしまう。
POST	フォームデータを見えなくすることができる。	ブックマークに登録してもフォームデータは消えてしまう。

Googleなどの検索結果のページや、現在地の地図ページなどはGETメソッド、掲示板やブログの書き込みページなどはPOSTメソッドを使うことが多いです。

テキストボックス

ここからはフォーム部品をひとつずつ解説して行きます。「テキストボックス」は一行の文字列を入力する際に使用します。inputタグを使い、属性typeに「text」を指定します。name属性にテキストボックスの名前を指定します。オプションで、value属性に最初から入っている値、sizeにテキストボックスの長さを指定することもできます。

textbox.html


<input type="text" name="message" value="初期値" size="10">

実行結果

別ページで開く

一行掲示板

以下のプログラムは、フォームのテキストボックスと、前章で学んだファイル関数を使った一行掲示板です。掲示板の書き込み内容を保存しておくファイルが必要なので、「bbs_simple.txt」という空のファイルを作ってソースと同じ場所に置いてください。

bbs_simple.php


<form method="post" action="bbs_simple.php">

<input type="text" name="toukou" size="60">

<input type="submit" value="送信">

</form>

<hr>

<?php

$ichiran = file_get_contents('bbs_simple.txt');

if (@$_POST['toukou']) {

  $ichiran = htmlspecialchars($_POST['toukou']) . "<hr>$ichiran";

  file_put_contents('bbs_simple.txt', $ichiran);

}

echo $ichiran;

?>

実行結果、自由に書き込んでください

別ページで開く

一行掲示板の解説


<form method="post" action="bbs_simple.php">

<input type="text" name="toukou" size="60">

<input type="submit" value="送信">

フォームのaction属性が自分自身になっています。つまり、送り元のフォームも、送り先の処理も同じソースでまかなっているということです。送信ボタンを押すと、POSTパラメータ「toukou」に書き込み内容が入って自分自身に送られます。


$ichiran = file_get_contents('bbs_simple.txt');

file_get_contents関数により$ichiranに今までの書き込み内容を読み込みます。


if (@$_POST['toukou']) {

投稿したかどうかをチェックしている部分です。条件式（@$_POST['toukou']）についている「@」は、エラーメッセージを抑制するはたらきがあります。これを付けないと最初に「Undefined index」という注意メッセージが出る場合があります。これは（送信していないとき）$_POSTにtoukouという添え字の要素がない、ということです。


$ichiran = htmlspecialchars($_POST['toukou']) . "<hr>$ichiran";

投稿していたらファイルから読み込んだ書き込み内容の先頭に投稿をくっつけます。その際、区切りとしてhrタグを挟んでいます。


file_put_contents('bbs_simple.txt', $ichiran);

そしてfile_put_contents関数によりくっつけた内容を上書きします。


echo $ichiran;

最後に書き込み内容を全て出力しています。

パスワード

「パスワード」は入力文字列を隠す一行入力フィールドです。inputタグの属性typeに「password」を指定します。name,value,size属性はテキストボックスと同様です。

password.html


<input type="password" name="pass" value="shokipass" size="15">

実行結果

別ページで開く

ログインページのパスワード入力に使うことが多いでしょう。

ラジオボタン

「ラジオボタン」は、複数の項目からひとつを選ぶ際に使用します。inputタグの属性typeに「radio」を指定します。name属性の同じラジオボタンがグループとなり、その中からひとつを選ぶと、value属性で設定した値が送られます。checked属性を付けると、最初にそのラジオボタンが選択されている状態になります。

radio1.html


<input type="radio" name="men" value="udon">うどん

<input type="radio" name="men" value="soba" checked>そば

実行結果

別ページで開く

複数のラジオボタングループ

ラジオボタンで複数のグループを作ってみましょう。以下のソースでは、「men」というグループと「animal」というグループを作っています。それぞれ選んだラジオボタンのvalue値がデータとして渡されます。例えば「men」グループで「うどん」、「animal」グループで「猫」を選ぶと、$_GET['men']の値は「udon」となり、$_GET['animal']の値は「cat」になります。

radio2.html


<form action="radio2.php" method="get">

  好きな麺類は？<br>

  <input type="radio" name="men" value="udon">うどん

  <input type="radio" name="men" value="soba">そば

  <input type="radio" name="men" value="ramen">ラーメン

  <br><br>好きな動物は？<br>

  <input type="radio" name="animal" value="dog">犬

  <input type="radio" name="animal" value="cat">猫

  <br><br><input type="submit">

</form>

radio2.php


<?php

  $men = htmlspecialchars($_GET['men']);

  $animal = htmlspecialchars($_GET['animal']);

  echo "あなたの好きな麺類は{$men}ですね<br>";

  echo "あなたの好きな動物は{$animal}ですね<br>";

?>

radio2.htmlの実行結果

別ページで開く

チェックボックス

「チェックボックス」は、チェックを付けたり外したりする項目に使用します。

inputタグの属性typeに「checkbox」を指定します。チェックを付けると、name属性で指定した名前でvalue属性で指定した値が送られます。checked属性を付けると、最初からチェックされている状態になります。

checkbox1.html


<input type="checkbox" name="men" value="udon">うどん

実行結果

別ページで開く

複数のチェックボックス

複数のチェックボックスを使う場合は、それぞれのname属性の値を変えるか、name属性の値に[]を付けます。[]を付けると、配列としてデータが送られます。

以下のプログラムの場合は、$_GET['men'][0]から順番にチェックの付けられたチェックボックスのvalue属性の値が入ります。例えば「うどん」「ラーメン」「パスタ」にチェックを入れれば、$_GET['men'][0]に「うどん」、$_GET['men'][1]に「ラーメン」、$_GET['men'][2]に「パスタ」が入ります。

checkbox2.html


<form action="checkbox2.php" method="get">

  <input type="checkbox" name="men[]" value="うどん">うどん

  <input type="checkbox" name="men[]" value="そば">そば

  <input type="checkbox" name="men[]" value="ラーメン">ラーメン

  <input type="checkbox" name="men[]" value="パスタ">パスタ

  <input type="submit">

</form>

checkbox2.php


<?php

  foreach ($_GET['men'] as $m) {

    echo htmlspecialchars($m) . "<br>";

  }

?>

checkbox2.htmlの実行結果

別ページで開く

ファイル

「ファイル」は、ローカルファイルをアップロードするときに使用します。inputタグの属性typeに「file」を指定します。

upload1.html


<?php

<input type="file" name="pic">

?>

実行結果

別ページで開く

またアップロードされたファイルのデータは、通常のフォーム部品からの送信とは少し違う形式で送られるので、それを表すためにformタグに「enctype="multipart/form-data"」を追加しなければなりません。

アップロードされたファイルの情報は、スーパーグローバル変数$_FILES配列で参照することができます。たとえばname属性の値が「pic」のときは、$_FILES['pic']['tmp_name']にサーバにアップロードされたファイルの一時的な名前が入り、$_FILES['pic']['name']にアップロードされた元のファイル名が入ります。

画像アップロードプログラム

以下のプログラムは、JPEG画像をアップロードすると、ブラウザでそれを表示します。

upload2.html


<form action="upload2.php" method="post" enctype="multipart/form-data">

  JPEG画像：<input type="file" name="pic">

  <input type="submit">

</form>

upload2.php


<?php

  if (move_uploaded_file($_FILES['pic']['tmp_name'], 'upload.jpg')) {

    echo '<img src="upload.jpg" alt="">';

  } else {

    echo "ファイルを選択してください。";

  }

?>

セキュリティの関係上、実行サンプルはありません。

move_uploaded_file関数は第1引数でアップロードされたファイルに付けられた一時的なファイル名、第2引数でサーバに置くファイル名を指定します。アップロードされた直後は一時的なファイルとなっているので、ちゃんとした名前でサーバに置く必要があるのです。

upload2.htmlを開き、ローカルのJPEGを選択して送信ボタンを押すと、まずそのファイルが$_FILES['pic']['tmp_name']の名前でアップロードされるので、move_uploaded_file関数によってupload.jpgという名前にし、表示するためのimgタグを生成しています。

隠しフィールド

「隠しフィールド」は、フォーム部品として表示させたくは無いが、データとしては送信したい値があるときに使用します。

inputタグの属性typeに「hidden」を指定します。name,value属性はテキストボックスと同様ですが、value属性を書かないと意味がないので注意しましょう。

以下に隠しフィールドのサンプルを示します。画面を見ると分かる通り、隠しフィールドは表示されません。ですが送信ボタンを押すと、ちゃんと隠しフィールドの値が送られています。

hidden.html


<form action="hidden.php" method="get">

  <input type="hidden" name="kakushi" value="隠れてます。">

  <input type="submit">

</form>

hidden.php


<?php

  $kakushi = htmlspecialchars($_GET['kakushi']);

  echo "隠しフィールドの値は「{$kakushi}」です。";

?>

hidden.htmlの実行結果

別ページで開く

サブミットボタン

「サブミットボタン」はいわゆる送信ボタンのことです。フォームに入力されたデータをactionで指定した先に送るときに使用します。

inputタグの属性typeに「submit」を指定します。value属性はボタンのラベルになります。name属性を指定すると、ボタンが押されたかチェックしやすくなります。

以下のプログラムは、サブミットボタンにname属性を付けて、押されたかどうかチェックしています。これによって、サブミットボタンを押して「submit.php」に移行する場合と、「submit.php」を直接開く場合で、処理を切り分けることができます。

submit.html


<form action="submit.php" method="get">

  <input type="submit" name="send" value="サブミットボタン">

</form>

submit.php


<?php

  if (@$_GET['send']) {

    echo "サブミットボタンを押しました。";

  } else {

    echo "サブミットボタンは押していません。";

  }

?>

submit.htmlの実行結果

別ページで開く

submit.phpを直接開いた場合

別ページで開く

選択リストボックス

「選択リストボックス」は複数のリストから選択するときに使用します。

選択リストボックスは今までのinput要素では無く、select要素を使います。<select>～</select>の間にoption要素を項目の数だけ挟みます。選択したデータは、selectタグのname属性で指定した名前で、選択した項目のvalue属性で指定した値が送られます。optionタグにselected属性を付けると、その項目が最初から選択されている状態になります。

select1.html


<select name="men">

  <option value="1">うどん</option>

  <option value="2">そば</option>

  <option value="3" selected>ラーメン</option>

</select>

実行結果

別ページで開く

選択リストボックスからデータを受け取る

以下のプログラムは、選択リストボックスから送られたデータを受け取るサンプルです。

select2.html


<form action="select2.php" method="get">

  <select name="men" size="4">

    <option>うどん</option>

    <option>そば</option>

    <option>ラーメン</option>

    <option>パスタ</option>

    <option>そうめん</option>

    <option>フォー</option>

  </select>

  <input type="submit">

</form>

select2.php


<?php

  $men = htmlspecialchars($_GET['men']);

  echo "{$men}好きな人ですね。";

?>

select2.htmlの実行結果

別ページで開く

selectタグのsize属性を「2」以上で指定すると、プルダウンメニューではなく、最初から項目リストが表示されるようになります。size属性で指定した値、ここでは4行分の項目が表示されます。表示しきれない項目がある場合はスクロールバーが出ます。

optionタグのvalue値を省略した場合は、option要素に書かれている文字列そのものが送られます。例えば「パスタ」を選択して送信すると、$_GET['men']には「パスタ」が入ります。

テキストエリア

「テキストエリア」は複数行を入力するときに使用します。

textarea要素を使い、cols属性で列数、rows属性で行数を指定します。<textarea>～</textarea>の間に初期値を複数行書くことができます。

textarea1.html


<textarea name="comment" cols="50" rows="5">初期値</textarea>

実行結果

別ページで開く

テキストエリアの内容を表示する

以下のソースは、テキストエリアに書かれた内容を表示するプログラムです。

textarea2.html


<form action="textarea2.php" method="post">

<textarea name="comment" cols="50" rows="5">複数行の

初期値</textarea>

<br><input type="submit">

</form>

textarea2.php


<?php

  echo nl2br(htmlspecialchars($_POST['comment']));

?>

textarea2.htmlの実行結果

別ページで開く

textareaタグの間に文字列を改行付きで書くと改行がそのまま反映されます。

HTMLでは改行は反映されないので、nl2br関数を通してbrタグに変換しています。nl2br関数は、引数で指定した文字列中の改行コードをbrタグに変換して返します。

前ページ　 PHP入門 TOP　次ページ