Laravelでチェックボックスやラジオボタンを扱う方法

1. Bladeでチェックボックスフォームを作る

1. Bladeでチェックボックスフォームを作る

初心者の方がLaravelで最初に迷いやすいのが、複数の項目を選択できる「チェックボックス」の実装です。HTMLの基本ではありますが、Laravelの便利な機能を組み合わせることで、より使いやすく堅牢なフォームを作成できます。

まず、チェックボックスを複数扱う場合の最大のポイントは、name属性の末尾に []（ブラケット）を付けることです。これにより、サーバー側で「配列」としてデータを受け取ることが可能になります。

<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <div class="mb-3">
        <p>趣味を選択してください（複数回答可）</p>
        <label class="me-2">
            <input type="checkbox" name="hobbies[]" value="読書" {{ in_array('読書', old('hobbies', [])) ? 'checked' : '' }}> 読書
        </label>
        <label class="me-2">
            <input type="checkbox" name="hobbies[]" value="映画" {{ in_array('映画', old('hobbies', [])) ? 'checked' : '' }}> 映画
        </label>
        <label class="me-2">
            <input type="checkbox" name="hobbies[]" value="旅行" {{ in_array('旅行', old('hobbies', [])) ? 'checked' : '' }}> 旅行
        </label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

上記のコードで非常に重要なのが old('hobbies', []) という記述です。これは、入力エラーなどで画面が戻ってきた際に、「ユーザーが直前にチェックしていた状態」を復元するために使います。

in_array() 関数を使い、「現在の項目の値が、送信された配列の中に存在するか」を判定し、存在すれば checked を出力して自動でチェックを入れ直します。第2引数に空の配列 [] を指定しておくことで、初回表示時（データが何もない時）のエラーを防ぐのがプロのテクニックです。

2. Bladeでラジオボタンフォームを作る

2. Bladeでラジオボタンフォームを作る

チェックボックスが「複数選択」だったのに対し、ラジオボタンは「複数の選択肢から必ず1つだけ」を選んでもらいたい場合に使用します。例えば、性別、アンケートの満足度、支払い方法の選択などが代表的な例です。

ラジオボタンを正しく機能させるための鉄則は、すべての選択肢の name 属性を同じ名前にすることです。これにより、ブラウザが「これらは同じグループだ」と認識し、1つを選択すると他のチェックが自動で外れるようになります。

<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <div class="mb-3">
        <p>性別を選択してください</p>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" name="gender" value="男性" class="form-check-input" {{ old('gender') == '男性' ? 'checked' : '' }}> 男性
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" name="gender" value="女性" class="form-check-input" {{ old('gender') == '女性' ? 'checked' : '' }}> 女性
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" name="gender" value="回答しない" class="form-check-input" {{ old('gender') == '回答しない' ? 'checked' : '' }}> 回答しない
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">送信する</button>
</form>

ここでも old() 関数が大活躍します。ラジオボタンの場合は in_array() を使う必要はなく、old('name属性名') == '値' という単純な比較だけでOKです。この条件が一致したときに checked が出力され、入力エラーで戻ってきた際もユーザーが選んだ項目が最初から選択された状態になります。

プログラミング未経験の方は、「value属性」に何を書くべきか迷うかもしれません。value はサーバーに送られる実際のデータです。画面に表示する「男性」「女性」という言葉と、システムが受け取る value="男性" をセットで記述することを忘れないようにしましょう。

3. Controllerで値を受け取る

3. Controllerで値を受け取る

Controller側ではRequestオブジェクトを使って値を取得できます。

public function submit(Request $request)
{
    $request->validate([
        'hobbies' => 'required|array',
        'gender' => 'required|string',
    ]);

    $hobbies = $request->input('hobbies'); // 配列として取得
    $gender = $request->input('gender');   // 単一値として取得

    // データベース保存や処理をここで行う
}

ポイントはチェックボックスは配列で受け取り、ラジオボタンは単一値で受け取ることです。

4. バリデーションとエラー表示

4. バリデーションとエラー表示

Laravelではチェックボックスやラジオボタンもバリデーション可能です。必須チェックなどを行うことで、ユーザーの入力漏れを防げます。

@if ($errors->has('hobbies'))
    <div class="text-danger">{{ $errors->first('hobbies') }}</div>
@endif

@if ($errors->has('gender'))
    <div class="text-danger">{{ $errors->first('gender') }}</div>
@endif

これで、未選択の場合にエラーメッセージを表示できます。

5. チェックボックス・ラジオボタン実装のポイント

5. チェックボックス・ラジオボタン実装のポイント

• チェックボックスは[]を付けて配列として送信
• ラジオボタンは同じ名前にして1つだけ選択可能にする
• old()を使ってバリデーション後も選択状態を保持
• ControllerでRequestから値を受け取り、必要に応じてバリデーションする
• エラーメッセージをBladeで表示してユーザーに入力ミスを知らせる

まとめ

まとめ

Laravelでチェックボックスとラジオボタンを扱う基本

ここまで、Laravelでチェックボックスとラジオボタンを扱う方法について詳しく解説してきました。フォーム入力はWebアプリケーションの基本となる重要な仕組みであり、ユーザーが入力した情報を正しく受け取り、処理することがとても大切です。

LaravelではBladeテンプレートとRequestオブジェクトを組み合わせることで、チェックボックスやラジオボタンの値をとても分かりやすく扱うことができます。HTMLフォームで作成した入力内容は、Controller側で簡単に取得できるため、初心者でもスムーズに実装できるのが特徴です。

特にチェックボックスは複数選択が可能な入力形式であるため、配列としてデータが送信される点が重要です。名前属性に配列形式を指定することで、LaravelのController側で複数の値をまとめて取得できます。一方でラジオボタンは一つだけ選択する入力形式のため、単一の値として扱うのが基本となります。

チェックボックスは配列で受け取る

チェックボックスは複数の項目を選択できる入力方式です。そのため、HTML側では名前属性の末尾に配列を示す記述を付ける必要があります。これにより、ユーザーが選択した複数の値が配列としてサーバーに送信されます。

LaravelではRequestクラスを使ってこの配列データを簡単に取得できます。配列として受け取ったデータは、そのままデータベースに保存したり、ループ処理で表示したりすることが可能です。

<label><input type="checkbox" name="hobbies[]" value="読書"> 読書</label>
<label><input type="checkbox" name="hobbies[]" value="映画"> 映画</label>
<label><input type="checkbox" name="hobbies[]" value="旅行"> 旅行</label>

このように配列形式にすることで、複数の趣味をまとめて送信できます。Laravelではこの配列をそのまま取得できるため、チェックボックスを扱う処理がとてもシンプルになります。

ラジオボタンは単一の値として扱う

ラジオボタンは一つだけ選択できる入力方式です。チェックボックスと違い、同じ名前属性を持つ複数のラジオボタンを作ることで、ユーザーはその中から一つだけ選択できるようになります。

Laravelでは選択された値をそのまま文字列として取得できます。例えば性別や支払い方法など、一つだけ選択させたい項目ではラジオボタンがよく使われます。

<label><input type="radio" name="gender" value="男性"> 男性</label>
<label><input type="radio" name="gender" value="女性"> 女性</label>

このように同じ名前を持つラジオボタンを複数用意することで、ユーザーはどれか一つだけを選択できるようになります。

Controllerでデータを取得する方法

LaravelではControllerでRequestオブジェクトを利用することで、フォームから送信された値を簡単に取得できます。チェックボックスの場合は配列として、ラジオボタンの場合は単一の値として取得されます。

また、バリデーションを組み合わせることで入力漏れや不正なデータを防ぐことができます。フォーム処理では必ずバリデーションを設定して、安全なアプリケーションを作ることが大切です。

public function submit(Request $request)
{
    $request->validate([
        'hobbies' => 'required|array',
        'gender' => 'required|string',
    ]);

    $hobbies = $request->input('hobbies');
    $gender = $request->input('gender');

    foreach ($hobbies as $hobby){
        echo $hobby;
    }

    echo $gender;
}

選択状態を保持するold関数

Laravelのフォーム処理では、バリデーションエラーが発生した場合でもユーザーが入力した内容を保持することが重要です。そのために使用するのがold関数です。

old関数を利用すると、フォーム送信後に入力状態を維持できるため、ユーザーは再入力する手間がなくなります。特にチェックボックスやラジオボタンでは、どの項目を選択していたのかを保持することがユーザビリティの向上につながります。

<input type="radio" name="gender" value="男性" {{ old('gender') == '男性' ? 'checked' : '' }}>

このように記述することで、バリデーションエラー後も選択状態を保持できます。

Laravelフォーム開発で覚えておきたい重要ポイント

Laravelでチェックボックスとラジオボタンを扱う際には、いくつかの重要なポイントがあります。まずチェックボックスは配列として送信する必要があるため、名前属性の書き方に注意する必要があります。そしてラジオボタンは同じ名前を付けることで一つだけ選択できるようになります。

また、フォームの入力データは必ずControllerでバリデーションを行い、安全なデータのみを処理することが大切です。Laravelのバリデーション機能を使えば、必須チェックやデータ形式の検証などを簡単に実装できます。

さらに、old関数を使って入力内容を保持することでユーザー体験を向上させることができます。こうした細かな工夫を積み重ねることで、実用的で使いやすいWebアプリケーションを作ることができるようになります。