formタグの配下にbuttonを入れないようにしたいとき

#解決したいこと

• formタグがたくさんあるから、HTMLファイルの下の方にまとめてしまいたい。
• liタグの中にformタグを入れるとレイアウトが崩れるから、liタグの外に出したい。
• formタグとボタンを関連付けしたい。

#よく見るformタグ
formタグの中にbuttonタグを入れて、送信を押すとformタグ内のinputの内容がサーバー側に送られる、
というのが一般的な作りだと思います。

↓こんな感じの

  <form action="{{ route('hoge') }}" method="post">
    @csrf
    <div class="md-form">
      <label for="name">名前</label>
      <input  class="form-control" type="text" id="name" name="name" value="{{ old('name') }}" required>
    </div>
 
    <button class="btn btn-block" type="submit">送信</button>
  </form>

※コードは**php（laravel）**です。bladeを使って書いています。

#解決したいことを叶えるには
formタグのidに「buttonタグのform属性と同じ名前」を、
buttonタグのform属性に「formタグのidと同じ名前」を入れることで
formタグとbuttonタグを関連付けることができます。

解決したいことを叶えることができます。

↓こんな感じ

<form id="buttonタグのform属性と同じ名前" action="{{ route('hoge') }}" method="post">
    @csrf
    <div class="md-form">
      <label for="name">名前</label>
      <input  class="form-control" type="text" id="name" name="name" value="{{ old('name') }}" required>
    </div>
</form>

    <button form="formタグのidと同じ名前" class="btn btn-block" type="submit">送信</button>
  

#参考
https://www.tagindex.com/html5/form/button.html

こんなんいつ使うの？と思われるかもしれませんが
結構使います。

いくつもの情報を送る画面を作成するとき、
formタグを一部に固めて書くことで可読性がアップする！というのを味わった現場がありました。

砂漠の砂の中から自分の使いたい知識をつなぎ合わせるような知識でした。