遷移先ページに値を受け渡すためには？~Webの基本、formについて~

今回は、webサイト作成の基本である、ページ間での値の受け渡しについて、formの作成を通して理解を深めていきたいと思います。

はじめに

Webサイトを作成するうえで、アンケートフォームの作成や、ログイン情報の保持などで、ページ間での値のやり取りは欠かせません。

では、どのようにページ間で値をやり取りするのでしょうか？

formタグ

値をやり取りするために、一般的に使われているのが<form>タグです。

<form>タグはhtmlで値を受け渡すときに使われます。

<form>
 //渡したい情報
</form>

このように、渡したい情報を<form>タグで囲って記述します。

下記は上記ファイルのブラウザ上での出力結果です。

あれ、真っ白で何も表示されていませんね。

、、

はい、実は<form>タグだけでは何も表示されないのです。

渡したい情報を入れるためのテキストボックスや、送信ボタンを画面に出すには<form>と</form>の間に<input>タグを挟み込む必要があります。

inputタグ

下記は実際に<form>タグに<input>タグを挟み込んだコードです。

<form>
    名前を入力してください。<br>
    <input type="text" name="name"><br>
    <input type="submit">
</form>

↓出力結果

無事、テキストボックスと送信ボタンが表示されました。

ついでに入力を促すメッセージも追加しました。

、、

では、早速テキストボックスに名前を入力して、送信ボタンを押してみましょう。

送信ボタンぽちっとな。

、、

あれ、なにも反応がありませんね。

それもそのはず、遷移先のページを用意していないのです。

次は遷移先のページを用意しましょう。

遷移先のページの作成

まず、遷移先のページを作成します。

遷移先ページは入力した情報を確認するページにしたいため、名前は「confirm.html」にしました。

、、

データを受け取るにはサーバーサイドスクリプトが必要です。

今回はサーバーサイドスクリプトにphpを使用します。

拡張子を.htmlから.phpに変更して保存します。

confirm.phpには下記のように記述します。

<?php
    print 'お名前は';
    print '入力した値';
    print 'ですね。';
?>

、、

では、もう一度、input.htmlを開き、送信ボタンを押してみましょう。

、、

あれ、また何も反応がありませんね。

なぜでしょうか？

、、

遷移先のページを指定する

ボタンを押しても、ページが遷移しなかったのは、遷移先のページをどこにも指定していなかったからです。

遷移先のページは<form>タグのaction属性で指定します。

この状態で保存し、再度送信ボタンを押してみます。

先ほど、用意した画面に遷移しました。

「遷移先のページはaction属性で指定する」

これは重要なので、よく覚えておきましょう。

、、

次からは、本日の本題であるデータの受け渡しに取り組んでいきます。

データの受け渡し

現在、テキストボックスに入力する値にかかわらず、遷移先のページで「入力した値」と表示されます。

これを、テキストボックスに入力した値が表示されるように変更していきます。

、、

phpで<form>タグにより送信された値を受け取るには$_GETを使います。

confirm.phpの『’入力した値’』の部分を『$_GET[‘name’]』に変更してみましょう。

<?php
    print 'お名前は';
    print $_GET['name'];
    print 'ですね。';
?>

$_GET[‘name’]の[‘○○’]の部分は、input.htmlで記述した<input>タグのname属性で指定した値です。

では、実際にテキストボックスに値を入力し、送信ボタンを押してみましょう。

入力した値が遷移先のページに表示されました。

ちなみに、何も入力せず送信ボタンを押したときは、値を受け取るはずだった部分には何も表示されなくなります。

次は、受け取った値をさらに次のページに渡す方法について説明します。

受け取った値を別のページに渡す

多くのwebページでは、入力した情報を確認するページと、登録完了ページがあります。

そのため、入力した情報は、さらに次のページに受け渡される仕組みが必要となります。

では、その仕組みを作っていきます。

、、

まず、新たに登録完了ページを作成します。

名前は「complete.php」としました。

プログラムは下記のように記述します。

<?php
    print $_GET['name'];
    print 'さん、登録ありがとうございます。';
?>

下記はこのcomplete.phpのブラウザ上での表示を確認してみた結果です。

値が受け渡されていませんので、注意メッセージが出力されてしまいます。

、、

では、値を受け渡していきましょう。

ただ、今回の登録確認ページでは入力フォームがありません。

入力欄がない状態でどのように値を受け渡すのでしょうか？

、、

入力欄がない状態での値の受け渡し

入力欄がない状態で値を受け渡すためには、hiddenパラメータを使います。

hiddenを使うと、値を画面に出さずに、こっそり次のページへ渡すことができます。

cofirm.phpに下記のformタグを追加します。

    print '<form action="complete.php">';
    print   '<input type="hidden" name="name" value="$_GET['name']">';
    print   '<input type="submit" value="OK">';
    print '</form>';

hiddenを使うには、<input>タグのtype属性に”hidden”を指定します。hiddenパラメータが指定された<input>タグは画面には表示されません。受け渡したい値はvalue属性で指定します。

この状態で、再度テキストボックスに値を入れて、送信してみます。

あれ、またさっきとは違うエラーが出ました。

今回はなにが原因なのでしょうか。

、、

実は、ここがphpでhiddenパラメータを使う上で重要なポイントとなってくるところです。

文字列の連結

エラーの該当行を見てみます。

   print   '<input type="hidden" name="name" value="$_GET['name']">';

phpではHTMLとして出力する範囲を「’」(単引用符)で囲う記述方式になっています。

そのため、$_GET[‘name’]で使用されている二つの「’」(単引用符)で、一旦範囲が区切られてしまい、エラーとなっていました。

、、

受け取った値や変数を渡すには、変数部分を単引用符で囲われた範囲から外に出し、結合する必要があります。

上記のプログラムのvalueで指定している変数部分を下記のように書き換えます。

変数部分を『’』(単引用符)で外に出し、『.』(ドット)で結合しています。

、、

これで再度実行してみます。

うまくいきました。

まとめ

今回は、データの受け渡しについてformの作成を通してまとめました。

formやhiddenを使った値の受け渡しは少しややこしいですが、web技術者にとって非常に重要な項目であるため、頭に刻んでおきましょう。

以上、ありがとうございました。