【Laravel初心者】BootstrapでのFormの作り方

Laravel初学者です。
オリジナルアプリを作成しているのでその過程を記事にしています。

理解が曖昧なところも多いため、ご指摘等ありましたらご連絡いただければ幸いです。

今回はBootstrapを用いたFormのviewを作成したので記録として残します。

環境

	Version
PHP	7.4.14
Laravel	8.24.0
mysql	8.0.23
docker	20.10.2
docker-compose	1.27.4

基本

日本語リファレンスを確認してなんとなく基本を学びました

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

上記は日本語リファレンスの引用です。

• formはform-groupで囲む。そうすることで1つのグループになるのでタブキーで移動できる。
• <input><select><textarea>にはclass="form-control"を付与する。

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

• 画像などのファイルの場合はclass="form-control-file"とする。

<form>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
</form>

• チェックボックスはclass="form-check-input"を付与する。

作成

じゃあ作ってみようと思って作成しました。

<div class="container mt-4">
  <div class="border p-4">
    <h1 class="h4 mb-4 font-weight-bold">新規作成</h1>

    <form action="{{ route('game.store') }}" enctype="multipart/form-data" method="POST" id="new">
      @csrf

      <fieldset class="mb-4">

        <div class="form-group">
          <label for="subject">
            ボードゲーム名
          </label>
          <input
            id="name"
            type="text"
            name="name"
            value="{{old('name')}}"
            class="form-control"
          >
        </div>

        <div class="form-group">
          <label for="subject">
            商品説明
          </label>
          <textarea
            id="new"
            name="describe"
            value="{{old('describe')}}"
            class="form-control"
            rows="8"
          >
          </textarea>
        </div>

        <div class="form-group">
          <label for="subject">
            プレイ時間
          </label>
          <input
            type="number"
            name="play_time"
            value="{{old('play_time')}}"
            class="form-control"
          >
        </div>

        <div class="form-group">
          <label for="subject">
            最小プレイ人数
          </label>
          <input
            type="number"
            name="players_minimum"
            value="{{old('players_minimum')}}"
            class="form-control"
          >
        </div>

        <div class="form-group">
          <label for="subject">
            最大プレイ人数
          </label>
          <input
            type="text"
            name="players_max"
            value="{{old('players_max')}}"
            class="form-control"
          >
        </div>

        <div class="form-group">
          <label for="exampleInputFile">
            商品画像
          </label>
          <input
            id="image"
            type='file'
            name="image"
            accept="image/png, image/jpeg"
　　　　　　　class="form-control-file"
          >
        </div>

        <button type="submit" class="btn btn-primary">
          投稿する
        </button>

      </fieldset>
    </form>
  </div>
</div>

上記のようなformができました。
すんごく簡単...

ちなみに最初にfileにclass="form-control-file"を付与せずに、
他と同じく`class="form-control"にしてしまったところ

上記の画像のようにfileのところが枠で囲まれてしまって変になりました。
勉強になりました。

以上です。