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

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

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

Bladeテンプレートで複数選択可能なチェックボックスを作る例です。

<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <label><input type="checkbox" name="hobbies[]" value="読書" {{ in_array('読書', old('hobbies', [])) ? 'checked' : '' }}> 読書</label>
    <label><input type="checkbox" name="hobbies[]" value="映画" {{ in_array('映画', old('hobbies', [])) ? 'checked' : '' }}> 映画</label>
    <label><input type="checkbox" name="hobbies[]" value="旅行" {{ in_array('旅行', old('hobbies', [])) ? 'checked' : '' }}> 旅行</label>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

ここでold()はバリデーションエラー後にチェック状態を保持するために使います。

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

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

次に1つだけ選択可能なラジオボタンの例です。

<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <label><input type="radio" name="gender" value="男性" {{ old('gender') == '男性' ? 'checked' : '' }}> 男性</label>
    <label><input type="radio" name="gender" value="女性" {{ old('gender') == '女性' ? 'checked' : '' }}> 女性</label>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

ラジオボタンは同じ名前にすることで1つだけ選択可能になります。old('gender')で前回の選択を保持します。

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アプリケーションを作ることができるようになります。