バナー画像

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

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

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

inputタグの形式

<input type="〇〇" name="〇〇" />

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

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

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

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

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

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

example-1.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ラジオボタンでPOST通信</title>
</head>
<body>
    <form method="POST" action="example-2.php">
        <h3>あなたの好きな食べ物を教えてください!</h3>
        りんご
        <input type="radio" name="food" value="りんご" /><br />
        ぶどう
        <input type="radio" name="food" value="ぶどう" /><br />
        ステーキ
        <input type="radio" name="food" value="ステーキ" /><br />
        クリームパン
        <input type="radio" name="food" value="クリームパン" /><br />
        おにぎり
        <input type="radio" name="food" value="おにぎり" /><br />
        パフェ
        <input type="radio" name="food" value="パフェ" /><br />
        <input type="submit" value="POST通信で送る" />
    </form>
</body>
</html>

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

 <input type="radio" name="food" value="りんご" />

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

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

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

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

example-2.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ラジオボタンでPOST通信</title>
</head>
<body>
    <?php
        echo "あなたの好きな食べ物は".$_POST["food"] ."ですね!";
    ?>
</body>
</html>

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

    <?php
        echo "あなたの好きな食べ物は".$_POST["food"] ."ですね!";
    ?>

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

動作確認

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

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

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

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

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

example-1.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>POST通信の使用例</title>
</head>
<body>
    <form method="POST" action="example-2.php">
        <h3>あなたの好きな食べ物を教えてください!</h3>
        りんご
        <input type="radio" name="food" value="りんご" /><br />
        ぶどう
        <input type="radio" name="food" value="ぶどう" /><br />
        ステーキ
        <input type="radio" name="food" value="ステーキ" /><br />
        クリームパン
        <input type="radio" name="food" value="クリームパン" /><br />
        おにぎり
        <input type="radio" name="food" value="おにぎり" /><br />
        パフェ
        <input type="radio" name="food" value="パフェ" /><br />
        <h3>あなたの性別を教えてください!</h3>
        男性
        <input type="radio" name="gender" value="男性" /><br />
        女性
        <input type="radio" name="gender" value="女性" /><br />
        どちらでもない
        <input type="radio" name="gender" value="どちらでもない" /><br />
        <input type="submit" value="POST通信で送る" />
    </form>
</body>
</html>

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

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

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

example-2.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>POST通信の使用例</title>
</head>
<body>
    <?php
        echo "あなたの好きな食べ物は".$_POST["food"] ."ですね!>br<";
        echo "あなたの性別は".$_POST["gender"] ."ですね!";
    ?>
</body>
</html>

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

まとめ

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

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。