【HTML】inputタグのradioボタンでサーバ通信ハンズオン
  • facebookページ
  • twitterページ
  • 2020.03.23

    【HTML】inputタグのradioボタンでサーバ通信ハンズオン

    HTMLにおけるinputタグのtypeに指定できるradio。そのプロパティ名から想像できる通り、このタイプのinputタグを使えばラジオボタンを設置することが可能です。今回の記事では、inputタグのradioボタンについて説明をしつつ、サーバサイド言語であるphpとHTMLを組み合わせてサーバ通信を体験してみましょう。

    HTML inputタグのradioボタンとは?

    まずはHTML inputタグのradioボタンについて、簡単に説明していきましょう。まずはinputタグの形式について確認です。

    inputタグの形式

    inputタグは基本的に上記のような形式で用いられています。「type」や「name」以外にもさまざまなプロパティがありますが、それらについてはケースバイケースで用いることができます。

    本記事で主に取り扱うradioは、typeプロパティの値に指定するものであり、「type=”radio”」を指定することによってラジオボタンの入力フォームが生成されます。

    phpとHTMLを組み合わせてサーバ通信ハンズオン1

    それでは早速、phpとHTMLを組み合わせてPOST通信を使ったハンズオンをおこなってみましょう。

    phpファイルにラジオボタンを設置しよう

    まずはラジオボタンを設置するphpファイルを作成しましょう。

    example-1.php

    ソースコードが多くなりましたが、注目してほしいのは「input」タグの部分です。inputタグ1つを抽出すると、以下のようになっています。

    ラジオボタンはどれだけ設置されていても選択できるのは1つだけです。また、それぞれのinputタグの違いは「value」プロパティのみです。valueプロパティが実際にPOST通信で送信するデータ。そして、actionプロパティは送信先のファイルとなります。またnameプロパティは、送信先ファイルが受け取るべきデータを識別するために必要なプロパティとなります。

    このように記述することによってPOST通信で送るデータ(value)をユーザーが指定することができ、その上

    ラジオボタンの入力データをPOST通信で受け取ろう

    さて上記ではラジオボタンの設置をすることができました。次におこなうのは、ラジオボタンで選択した入力データをPOST通信によって、別のphpファイルで受け取るということです。example-1.phpのformタグ・action属性を見ると分かる通り、受け取り側のファイルは「example-2.php」です。

    example-2.php

    example-2.phpの中で重要なソースコードは、以下の部分です。

    HTMLのなかに、一部分だけphpのソースコードが挿入されていることがわかるはずです。「$_POST[“food”]」という書き方は馴染みがないかもしれませんが、意味がわかれば簡単です。「$_POST」の部分はPOST通信で受け取ったデータを表しており、その中でも「food」というnameのデータを指定しているということになります。

    動作確認

    さて、ここまでできればあとは動作確認をしてみましょう。そうすると、example-1.phpで選んだ食べ物に合わせて「あなたの好きな食べ物は〇〇ですね!」といったように出力されるはずです。

    phpとHTMLを組み合わせてサーバ通信ハンズオン2

    次にphpとHTMLを組み合わせて、2つの値をPOST通信で受け取ってみましょう。これが理解できればいくつでも複数の値を受け取ることができるようになるため、さらに応用力が身につくはずです。

    phpファイルにラジオボタンを設置しよう

    まずはラジオボタンを設置するphpファイルを作成しましょう。

    example-1.php

    構造的に特殊なことはしていません。単純にradioボタンを増やし、その上でinputタグのnameプロパティの値を「gender」で指定しました。これだけで簡単にラジオボタンの選択項目を増やすことができるのです。これを活用すればウェブアンケートなども簡単に作れますね。

    ラジオボタンの入力データをPOST通信で受け取ろう

    こちらもハンズオン1と同様にphpを挿入して、POST通信で受け取るname属性を指定すれば、該当するnameプロパティのデータを受け取ることが可能です。

    example-2.php

    これだけで簡単に複数の項目があるラジオボタンを作成することができました。このようにphpとHTMLの入力フォームを組み合わせ、POST通信でユーザーの入力したデータを表示できれば、それだけでインタラクティブなウェブサイトを構築することができます。ぜひ今回のハンズオンを活用して、ラジオボタンのほかにもさまざまな入力フォームを導入していきましょう。

    まとめ

    今回の記事では、inputタグのradioボタンについて説明をしつつ、サーバサイド言語であるphpとHTMLを組み合わせてサーバ通信をおこないました。HTMLで入力フォームを生成し、phpなどのサーバサイド言語と組み合わせると上記のように動的なウェブサイトを作ることができます。やはりウェブサイトは、アクセスユーザーがあってこそ。動的なサイトを作る一歩として、今回のハンズオンを活用してみてください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE