【Laravel 초보자】 Bootstrap에서 Form을 만드는 방법

Laravel 초학자입니다.
오리지널 앱을 작성하고 있으므로 그 과정을 기사로 하고 있습니다.

이해가 모호한 곳도 많기 때문에, 지적 등 있으면 연락 주시면 감사하겠습니다.

이번에는 Bootstrap을 이용한 Form의 view를 작성했기 때문에 기록으로 남깁니다.

환경

버전


PHP
7.4.14

라라벨
8.24.0

mysql
8.0.23

도커
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로 묶는다. 그렇게 함으로써 하나의 그룹이 되므로 탭 키로 이동할 수 있다.

<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이 생겼습니다.
매우 간단 ...

그건 그렇고, 먼저 파일에 class="form-control-file"를 부여하지 않고,
다른 것과 같이`class="form-control"로 해 버린 곳



위의 이미지와 같이 file의 곳이 테두리로 둘러싸여 버려 이상하게 되었습니다.
공부가 되었습니다.

이상입니다.