Laravel Collectiveで入れ子構造のformの書き方

前提

バージョン：Laravel6、HTML5
Laravel Collective 導入済み

実装方法

HTML5ではinputタグにform属性を追加することで任意のformに対応させることができる。

①formにidを付ける

Form::openの引数でidを設定する。

{!! Form::open(['route' => 'ルート指定', 'method' => 'メソッド指定', 'id' => 'id指定'])

②inputにform属性を付ける

Form::**の引数でform属性にformタグのidを指定する。

{!! Form::text('変数名', '初期値', ['form' => 'formのidを指定']) !!}
{!! Form::submit('表示名', ['form' => 'formのidを指定']) !!}

③中身を任意の場所に置く

formタグ自身は入れ子にできないため、中身だけを任意の場所に置く。

サンプル

簡単なサンプル。
このサンプルでは入れ子にする意味は特にないが、入れ子構造はフォーム内にリセット・検索・抽出など機能を持つ要素を配置したいときに役立つ。

コード

demo.blade.php

<body>

    <!-- formタグ自身は入れ子にできないので外側に配置 -->
    {!! Form::open(['route' => 'demo1', 'method' => 'post', 'id' => 'form1']) !!}
    {!! Form::close() !!}

    <!-- 本体となるform -->
    {!! Form::open(['route' => 'demo2', 'method' => 'post', 'id' => 'form2']) !!}

        <!-- 入れ子にしたいformの中身 -->
        <div>
            {!! Form::label('text1', 'フォーム1') !!}
            {!! Form::text('text1', '', ['form' => 'form1']) !!}
            {!! Form::submit('送信1', ['form' => 'form1']) !!}
        </div>

        <!-- 本体となるformの中身 -->
        <div>
            {!! Form::label('text2', 'フォーム2') !!}
            {!! Form::text('text2', '', ['form' => 'form2']) !!}
            {!! Form::submit('送信2', ['form' => 'form2']) !!}
        </div>

    {!! Form::close() !!}

    <p>フォーム1の送信結果：{{ $text1 }}</p>
    <p>フォーム2の送信結果：{{ $text2 }}</p>

</body>

web.php

Route::get('/demo', 'DemoController@demoget')->name('demo');
Route::post('/demo1', 'DemoController@demo1')->name('demo1');
Route::post('/demo2', 'DemoController@demo2')->name('demo2');

DemoController.php

    public function demoget() {
        return view('demo',[
            'text1' => '未送信',
            'text2' => '未送信'
        ]);
    }

    public function demo1(Request $request) {
        $text1 = $request->text1;

        return view('demo',[
            'text1' => $text1,
            'text2' => '送信なし'
        ]);
    }

    public function demo2(Request $request) {
        $text2 = $request->text2;

        return view('demo',[
            'text1' => '送信なし',
            'text2' => $text2
        ]);
    }

実行結果

~/demoにgetアクセス

上記入力の状態で「送信1」

上記入力の状態で「送信2」

Laravelで入れ子構造のform

前提