PHP入門

フォームを扱う2–チェックボックス等

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
チェックボックス、ラジオボタン、ドロップダウンリストとリストボックスの場合、送信される値の扱いが少し特殊な方法になります。value属性の活用方法を紹介しましょう。
講師:
15:28

字幕

ここでは フォームを扱うの2番目としましてチェックボックスなど少し特殊なコントロールの扱い方というのをご紹介していきたいと思います。では、まずはこちらの MAMP のアップロードフォルダーですね。MAMP>htdocs の中に1つフォルダーを作っていきます。今回は lesson02-04 というフォルダーにしていきます。そして、この中にテンプレートの画像やCSS これをコピーしていきましょう。そして、この index.html を編集していきます。まず、タイトル等を入れて頂いてそして、こちらにも入れます。そして、この content の中にフォームを入れていくわけなんですけどまずは、action 属性は空にしてmethod 属性をget とします。そして、ちょっとここでは定義リストというdl というのでマークアップしていきたいと思いますけどdt ということで「同意しますか?」何か、例えば規約などがあったとしてそれについて同意するかどうかということで、チェックボックスを1つ追加していきたいと思います。input type は checkbox としましてname に agree とします。 そして、 value をひとまず空にしておきましょう。そして、ここに同意する、と「同意します」とラべルを付けてあげてdl 要素を閉じます。後はsubmit という type 属性の送信ボタンを設置してあげましてフォームを閉じます。これでフォームが出来上がりましたのでまずは表示を確認してみましょう。MAMP を起動していただいて「サーバを起動」というボタンでApache 等が起動されていることを確認します。そして、Web ブラウザーで此方ですね、lesson02-04 の index.html という所にアクセスをしていきます。そうしますと、「フォームを扱う2」ということで「同意しますか?」というチェックボックスが出来上がっています。「送信する」ボタンがあります。では、このチェックマークをチェックして「送信する」ボタンをクリックしたときにその送信先の php ではこれをどのように受け取ることができるのかということをご紹介していきます。まず新しいファイルを1つ作りましてこちらを php の「レイアウト」はなしそして、「ドキュメントタイプ」をHTML5 とします。「作成する」ボタンをクリックして頂いてこの既存の HTML は削除してしまって構いませんので今作ったこちらのフォームですね、この HTML をすべてコピーして貼り付けていきます。 そして、この content の中を一度消して頂いてそして、ここにp タグで「あなたの回答は、」としましょう。そして、この中に書いていきます。1つ前のチャプター「フォームを扱う」という所でご紹介した通りフォームから受け取れる値というのはprint として $_GET と書きます。そして、この中にフォームのname 属性に指定した内容を書いてあげます。つまりここでは agree となります。そして、] で閉じて) を閉じるという形で書いていきます。これで前回と同じようなプログラムが出来上がったんですけどこのまままずは動かしてみましょう。このファイルは lesson02-04 の中にinput_do.php という名前で保存をします。そして、こちらのフォームの action 属性には今作った input_do.php を指定してこれでフォームと次の画面の php が接続されることになります。では、動きを’確認してみましょう。こちらのフォームを一度再読み込みしましてこの状態でチェックボックスをチェックします。そして「送信する」ボタンをクリックしますと次の画面に移動します。こちら、うまくフォームとしては送信されているんですが「あなたの回答は、」の後は何も入っていません。 もしかしたら、いままでのテキストフィールドテキストエリアなどと同じような考え方でいきますとこのチェックマークの隣にある「同意します」という文言が次の画面には送られることが期待されるかもしれません。ですが、残念ながらチェックボックスやラジオボタンなどのコントロールはこの様に横に書かれたラベルというのは送られません。何を送られるのかと言いますとこちらのチェックボックスにあるvalue 属性この内容が送られます。なので、もし同意しますというメッセージを送信したいのであればこちらの value 属性の方に改めて同意しますという風に記述しないと、送ることができません。では実際に動作を確認してみましょう。まず、こちらのフォームの画面を再読み込みします。そして、「同意します」のチェックマークをチェックして、「送信する」ボタンをクリックしましょう。そうしますと、「あなたの回答は、「同意します」です。」という形で前の画面でチェックをしたという情報が送られていることがわかります。なので、もしこちらのラベルとチェックマークの内容を変えたいのであればこのラベルはそのままにしてvalue 属性を、例えば on などとすればこちら、再読み込みをしてチェックマークをチェックすると「送信する」ボタンは、この様に「「on」です。」という形になります。 そして、例えばこちら「同意します」に戻した状態でこちらからチェックマークを付けない状態で「送信する」をクリックしたときどのようになるかと言いますと、こちらは何も送信されない状態になります。もし、この時に「同意しません」という回答を送信したいということであれば今、ここまでの知識だけでは行えませんので後のチャプターである if 構文分岐という構造を覚えなければなりませんので少し、この「同意しません」というメッセージを送る、というのはもう少し学習を進めていく必要があります。ここでは、もう少し違った内容をご紹介していきます。まず、選択肢を増やしていきましょう。「好きないろはなんですか?」ということで「色」ですね。選択肢を幾つか提示したいと思います。ではここでは label とつけましてそして、input type を今度はラジオボタンにしたいと思います。radio になります。そして、name としまして color としてvalue 属性は例えば赤としましょう。そして、ここに「赤」と書きます。もう1つinout type、radio で今度は例えば「青」という選択肢を提示したいんですけどその場合この name 属性には今の「赤」と同じ colorというのを指定します。 まずはやってみましょう。例えばここで「青」とします。少し HTML を整えていきます。label で囲いましてそして「赤」と「青」の間を少し空けましょう。これで選択肢が出来上がりました。では、画面の表示を一度確認してみます。Web ブラウザーに切り替えてフォームの画面index.html を再読み込みします。そうしますと、「好きな色はなんですか?」ということで「赤」と、それから「青」がラジオボタンで用意されています。ラジオボタンというのはチェックボックスと違いましてこの様に複数あった場合にどちらか一方しかチェックすることができないというコントロールです。なので、択一ですね。どれか1つだけしか選べないという選択肢を作る時に、こちらのラジオボタンは非常に便利です。ラジオボタンをこの様に、どちらかしかチェックできないようにするためにはこの name 属性を同じにしなければなりません。例えば、「赤」の方をcolor red などとして青の方を color blue 等のようにname 属性を変えてしまうとこれは別々のラジオボタンになってしまいまして両方がチェックできる状態になってしまいます。そのためどちらかだけをチェックさせたいのであればname 属性は同じものにします。 これというのは逆に扱いやすく成ります。何故なら、こちらの name 属性が同じですので次の画面で受信する時にはどちらかに指定した name 属性所謂、両方に指定した name 属性これを、ここの $_GET に指定すればいいことになります。では書いていきましょう。「あなたの好きな色は、」ということでここに print ですね。そして $_GET としてcolor とします。それでは、こちらで動きを確認していきます。まず再読み込みをします。名前を name 属性ですね、合わせましたので、この様に どちらかをチェックできるようになります。「送信する」ボタンをクリックしますと次の画面では「あなたの好きな色は、「赤」です。」ということでうまく送信されていることがわかります。そして、「青」の方もチェックをすると「青」という形で、同じように送信することができます。もう1つ HTML のコントロールとしてあるのがドロップダウンリストというものです。実際にやってみましょう。「都道府県」ということでここでは select ということでname 属性に prefecture のpref と指定します。そしてoption タグで value 属性「北海道」とします。 そして「北海道」と囲います。本当は全部47都道府県書き続けていけばいいんですけどここでは少し省略して「東京都」そして「沖縄県」ということで少し省略していきたいと思います。このように3択で選択肢が作れるようになりまし’た。では、こちらも内容をまずは確認していきましょう。dt でこの様に囲ってあげます。では、フォームの画面を確認します。そうしますと、今度は「都道府県」ということでこの様にクリックすると選択肢がでてくるドロップダウンリストというものが作れるようになりました。ドロップダウンリストとラジオボタンは動きとしては同じです。どれか1つだけ選ぶことが出来るというものなんですがドロップダウンリストの場合大量の選択肢を非常にコンパクトに収めることができるので「都道府県」ですとか何十個も選択肢があるようなものを収める時には便利なコントロールです。こちらで選んだものを次の画面で受信するにはラジオボタンと全く一緒です。こちらに name 属性があります。そして、それぞれに value 属性が付いていますのでこの name 属性を次の画面でということで、ここにprint、$_GET、pref ということで今のドロップダウンのname 属性を指定すればやってみましょう。 この様に選択して、例えば「東京都」を選びます。「送信する」ボタンをクリックするとこの様に「「東京都」です。」ということででてきます。少し選択肢を変えてみましょう。戻って「沖縄県」にすれば当然ながら「沖縄県」になるということですね。で、ドロップダウンの場合ラジオボタンと違いましてページを表示した時に、既に1つ目の選択肢が選ばれた状態になってしまいます。ラジオボタンはこの様に、どれも選んでいないという状態ができるのですが例えばこの「都道府県」の場合選び忘れた時にユーザーは「北海道」を選んだのと同じ状態になってしまいます。そこで通常、ドロップダウンはこちらの HTML を改良していきます。option としてまず value に何も指定しないcolor 属性を指定します。そして、例えばここも何も入れずにoption タグを閉じる、というのはこの様な表示になります。リロードしますと、ここに何も表示されていない選択肢が出来上がって次から選択肢ができるという状態。これは選択しなければ「送信する」ボタンをクリックしても次の画面でも何もでてきません。あとは、例えばこういった三角という様な記号を使ってあげて「選択してください」という様な文言を書くこともよくあります。 この時も注意しなければいけないのはvalue 属性は必ず空のままにして下さい。これでリロードしますとこの様に「選択してください」ということで非常に親切な選択肢が出来上がって何も選択してない状態で「送信する」をクリックすればこの様に何も送られないということもできます。この value 属性とそして表示されている内容が異なるというのはチェックボックス、それからこちらのラジオボタンそして、ドロップダウンそして、もう1つがリストボックスと言われるsize 属性を指定した場合ですね。この様なリスト形式で表示させるものこの4種類が value 属性と表示されている内容が異なるものが送られるというケースです。テキストフィールドやテキストエリアと組み合わせて使うこともできますがこの様に少し性格が異なりますので気を付けて使うようにして下さい。

PHP入門

このコースでは動きのあるWebサイトでショッピング、友人との写真を共有、キーワードによる情報検索など便利な仕組みを作るための技術であるPHPについて解説します。これまでプログラミングに触れたことがない方でも、ちょっとしたプログラムを自分で作ることができるようになります。

4時間56分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年01月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。