CodeIgniterでチェックボックス・ラジオボタンを扱う方法！Webフォームの基本をマスター

1. フォームの「部品」について知ろう

1. フォームの「部品」について知ろう

Webサイトで自分の情報を入力する画面を「フォーム」と呼びます。例えば、お問い合わせフォームや会員登録画面がそれにあたります。その中で、丸いボタンをポチッと押して一つだけ選ぶものをラジオボタン、四角い枠にチェックを入れて複数選べるものをチェックボックスと呼びます。

パソコンの操作に慣れていない方でも、スマートフォンで「規約に同意する」のチェックを入れたり、性別を選択したりした経験があるはずです。それらを作るための仕組みを、PHPというプログラミング言語のフレームワーク「CodeIgniter（コードイグナイター）」を使って作っていきます。

2. ラジオボタンで「一つだけ」選択する仕組み

2. ラジオボタンで「一つだけ」選択する仕組み

ラジオボタンは、複数の選択肢の中から「必ず一つだけ」を選んでもらいたいときに使います。例えば「はい・いいえ」の選択や、血液型などが代表的です。これをHTMLで書くときは、同じグループのボタンに同じ「名前（name）」をつけるのがルールです。

CodeIgniterでは、set_radio()という便利な機能があります。これを使うと、もし入力エラーがあって画面が戻ってきたときでも、ユーザーがさっき選んだ項目を勝手に「選択された状態」に戻してくれます。これはユーザーにとって非常に親切な機能です。

<p>性別を選択してください：</p>
<input type="radio" name="gender" value="male" <?php echo set_radio('gender', 'male'); ?>> 男性
<input type="radio" name="gender" value="female" <?php echo set_radio('gender', 'female'); ?>> 女性

3. チェックボックスで「複数」選択する仕組み

3. チェックボックスで「複数」選択する仕組み

チェックボックスは、好きなだけ選んでも良いときに使います。「趣味は何ですか？」という質問に対して「読書」と「映画鑑賞」の両方に印を付けるような場面です。この場合、プログラミングの世界では「データの束（配列）」として値を扱う必要があります。

CodeIgniterでは、名前の末尾に[]（角括弧）をつけることで、複数のデータを受け取れるようにします。また、ラジオボタンと同様にset_checkbox()を使うことで、再表示したときにチェックが消えないように設定できます。これを「状態の保持」と言います。

<p>好きな食べ物（複数回答可）：</p>
<input type="checkbox" name="hobby[]" value="apple" <?php echo set_checkbox('hobby[]', 'apple'); ?>> りんご
<input type="checkbox" name="hobby[]" value="banana" <?php echo set_checkbox('hobby[]', 'banana'); ?>> バナナ
<input type="checkbox" name="hobby[]" value="orange" <?php echo set_checkbox('hobby[]', 'orange'); ?>> オレンジ

4. 送られてきたデータをコントローラーで受け取る

4. 送られてきたデータをコントローラーで受け取る

ユーザーがボタンを押して送信した後、その内容をサーバーという大きなコンピューターが受け取ります。CodeIgniterでは「コントローラー」という場所が、司令塔の役割を果たしてデータを受け取ります。ここで使うのが$this->input->post()という魔法の言葉です。

「ポスト」とは、郵便ポストのようにデータを送る方法のことだと考えてください。受け取ったデータが空っぽではないか、変な文字が入っていないかをチェックすることを「バリデーション」と呼びますが、CodeIgniterはこのバリデーションも得意分野です。初心者でも安全にデータを扱えるようになっています。

// 送られてきたデータを変数に格納する処理
$user_gender = $this->input->post('gender'); // ラジオボタンの値
$user_hobbies = $this->input->post('hobby'); // チェックボックスの値（配列）

if (!empty($user_gender)) {
    echo "あなたは " . $user_gender . " を選択しました。";
}

5. 配列のデータを表示してみよう

5. 配列のデータを表示してみよう

チェックボックスで送られてきたデータは「配列」という、仕切りのある箱に入っています。これをそのまま表示しようとすると、コンピューターは困ってしまいます。そこで、箱の中身を一つずつ取り出して表示するためにforeachという繰り返し命令を使います。

この繰り返し処理を使うと、「りんご」「バナナ」のように選ばれた分だけ順番に画面に書き出すことができます。プログラミングにおいて、この「一つずつ取り出す」作業は非常に重要です。料理で例えるなら、買い物カゴの中に入れた野菜を一つずつ取り出して洗っていくようなイメージです。

// 選択された趣味を順番に表示する
if (!empty($user_hobbies)) {
    echo "あなたの趣味は以下の通りです：<br>";
    foreach ($user_hobbies as $item) {
        echo "・" . $item . "<br>";
    }
} else {
    echo "趣味は選択されていません。";
}

6. バリデーションルールを設定して入力を制限する

6. バリデーションルールを設定して入力を制限する

ユーザーが何も選ばずに送信ボタンを押した場合、「何か選んでください！」とメッセージを出したいことがあります。これを「必須チェック」と言います。CodeIgniterのフォームバリデーションライブラリを使うと、一行書くだけでこのチェックが実装できます。

プログラミング未経験の方は「コードを書くのは難しそう」と感じるかもしれませんが、CodeIgniterなら「genderという項目は必須（required）ですよ」とルールを教えるだけで済みます。これにより、意図しないデータが自分のシステムに入り込むのを防ぎ、安全なWebサイト運用が可能になります。

// バリデーションルールの設定例
$this->load->library('form_validation');

$this->form_validation->set_rules('gender', '性別', 'required', 
    array('required' => '%sは必ず選択してください。')
);

if ($this->form_validation->run() == FALSE) {
    // 入力エラーがある場合の処理（フォームを再表示など）
}

7. 実際の動きをイメージしてみよう

7. 実際の動きをイメージしてみよう

ここまでの流れを整理しましょう。まずユーザーが画面でチェックを入れます（ビュー）。次に送信ボタンを押すと、司令塔（コントローラー）にデータが届きます。司令塔はデータが正しいかチェックし、問題なければ結果を表示します。この一連の流れを「リクエストとレスポンス」と呼びます。

パソコンを触ったことがない方でも、銀行のATMでボタンを選んで進んでいく操作を思い出してください。あの裏側でも、今回学んでいるような「どのボタンが押されたか」を判断する仕組みが動いています。Web開発は、そんな生活を便利にする仕組みを自分の手で作ることができる、とてもワクワクする分野なのです。

（実行結果のイメージ）
あなたは male を選択しました。
あなたの趣味は以下の通りです：
・apple
・orange

8. ユーザーに優しいフォーム作りのコツ

8. ユーザーに優しいフォーム作りのコツ

最後に応用編として、使いやすさ（アクセシビリティ）の話をします。チェックボックスやラジオボタンの横にある「文字」をクリックしても、ボタンが反応するようにすると、ユーザーはとても使いやすくなります。これはHTMLのlabelタグというものを使います。

マウスの操作が苦手な方や、画面の小さなスマートフォンを使っている方にとって、小さな丸や四角を正確にタップするのは大変です。文字の部分まで反応するように工夫することは、プログラミング技術と同じくらい大切な「思いやり」の技術です。CodeIgniterでの開発を通じ、ぜひ使う人の気持ちに立ったサイト制作を目指してください。