前提条件
- laravelで書いています。
- blade.phpの書き方
一般的なフォーム
フォームの中に、サーバーに送りたいデータ（inputタグ）があって、それをbuttonタグでサブミットしている。
<form action="{{ route('create') }}" 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>
ボタンを外出ししたもの。
formタグをblade.phpの下の方にまとめておいて、どのフォームとどのボタンが連携しているのかを
<form id="buttonタグのform属性と同じ名前"></form>
<button form="formタグのidと同じ名前">送信</button>
formタグの、id属性
buttonタグのform属性
で連携させているもの。
<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>
formタグ、inputタグ、buttonタグをそれぞれ別にしたもの。
一つの画面で、何箇所もボタンがあったり
登録するデータの量が膨大なとき
以下のように書いている現場があった。
formタグ、inputタグ、buttonタグをまとめるのではなく、
別々にすることで、コードを見やすくすることが目的。
書き方の雛形としては、こう。
<button form="formタグのidと同じ名前" class="btn btn-block" type="submit">送信</button>
<form id="buttonタグのform属性と同じ名前" action="{{ route('hoge') }}" method="post">
@csrf
</form>
<input form="formタグのidと同じ名前" type="text" id="name" name="name" value="{{ old('name') }}" required>
なにか登録用のデータを流したいんだとしたら、自分ならこうする。（その現場に合わせるなら）
<button form="store" class="btn btn-block" type="submit">保存</button>
<button form="search" class="btn btn-block" type="submit">検索</button>
<form id="store" action="{{ route('store') }}" method="post">
@csrf
</form>
<form id="search" action="{{ route('search') }}" method="post">
@csrf
</form>
<input form="store" type="text" id="name" name="name" value="{{ old('name') }}" required>
<input form="store" type="text" id="email" name="email" value="{{ old('email') }}" required>
<input form="store" type="text" id="address" name="address" value="{{ old('addless') }}" required>
<input form="store" type="text" id="tel" name="tel" value="{{ old('tel') }}" required>
<input form="search" type="text" id="hoge" name="hoge" value="{{ old('hoge') }}" required>
<input form="search" type="text" id="fuga" name="fuga" value="{{ old('fuga') }}" required>