Formタグと@method

初学者向けの内容。不明点をまとめた。

環境

OS: Windows11 バージョン23H2
Laravel: 9.52.16
PHP: 8.1.0
開発環境:MAMP

Formタグのこと

商品一覧のView

      <form action="{{route('list')}}" method="get">
            @csrf
        <div>
            <h2>商品一覧画面</h2>
            <div class="search">
                <input type="search" name="search" class="formCont" placeholder="検索キーワード" value="{{ request('search') }}">
                <input type="search" name="maker" class="formCont" placeholder="メーカー名" value="{{ request('maker') }}">
                <input type="submit" name="submit" class="kensaku" value="検索" onclick="location.href='http://localhost:80/laravel7/public/list'">
            </div>
        </div>
      </form>

----------------------------------------------------------------------------------

        <form action="{{ route('list_delete', $product->id) }}" method="POST">
                @csrf
                @method('DELETE')
            <button class="delete" type="submit">削除</button>
        </form>

検索ボタン、削除ボタンを書く際にFormタグを使っている。少し前まではFormタグでどこからどこまでを囲めばいいのかよくわかっていなかった。
今はデータベースまで動作が及ぶようなボタンを実装したいときに「@csrf+button」をFormで囲めばいいんだなと解釈している。

そこでFormをFormで入れ子状態にしたらどうなるのか疑問に思ったので調べてみた。

結論

HTML公式「Formタグの入れ子はやめれ」
参照：https://developer.mozilla.org/ja/docs/Web/HTML/Element/form

とのことだった。
ほか、Qiitaの記事も参考にしたものがあるのでのせる。
基本的にしてはいけないが、下記のように方法はある感じだった。
→https://qiita.com/k5trismegistus/items/eda92664037f96f40e37

Formタグを入れ子にせず複数使用するのはとくに問題ない。

「@method('DELETE')」ってなに

・@methodとは
bladeディレクティブ（@if,@sectionなど）の一つ。GET・POST以外のHTTPメソッドを利用したいときに@methodを使う。

・('DELETE')とは
HTTPメソッドの一つ。GET/POST/DELETEのほかにPUTなどがある。
Formタグのmethod属性に対してはGET/POSTしか指定することができないため、このようにディレクティブとあわせて利用する。

◎具体的な使い方

例

<form action="/sample/index" method="patch">
   <input type="submit" text="提出">
</form>

上記のように入力するとエラーが出てしまう。理由は前述したとおりで、「method="patch"」の部分にある。
Formタグのmethod属性にはGET・POSTしか対応していないため、それ以外の値を入れたとしても実際にはGET・POSTでしか動かない。

修正ver

<form action="/sample/index" method="post">
@csrf
@method('patch')
   <input type="submit" text="提出">
</form>

例文にはsubmitとあるので、Formタグのmehod属性はpostにする。
「@method('patch')」と指定することでエラーも起きず通信することができる。

◎仕組みについて

→@method('patch')の部分は実際には下記のように変換される。

@method('patch')を変換すると

<input type="hidden" name="_method" value="patch">

サーバー側はvalueの部分をみてルーティングをする。
というような仕組みになっている。

最後に

よくわかってなかった部分を少しまとめただけ。