[Laravel][Bootstrap3] 회원가입 각종 폼 양식

form.blade.php

<!--
참고:
https://getbootstrap.com/docs/3.3/css/
https://mdbootstrap.com/components/bootstrap-radio-button/

-->

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="text-center">신청서 작성</h4>
  </div>

  <div class="panel-body">
    <!--
    desc: 주소 입력 폼
    required: 다음 우편번호나 행자부 API를 이용해서 주소를 검색한 텍스트
    type: text
    -->
    <div class="form-group{{ $errors->has('address') ? ' has-error' : '' }}">
      <label for="address1" class="col-md-3 control-label">주소</label>
      <label for="address2" class="sr-only"></label>

      <div class="col-md-8">
        <input id="address" 
               name="address_for_rental[]"
               class="form-control address-search"
               onclick="searchAddress('id1','id2')"
               value="{{ old('address_for_rental.0') }}"
               placeholder="주소를 검색해 주세요" required readonly>
        <div class="input-group">
          <input id="address" 
                 name="address_for_rental[]"
                 class="form-control"
                 placeholder="상세주소"
                 value="{{ old('address_for_rental.1') }}"
                 required>
          <div class="input-group-addon address-search"
               onclick="searchAddress('id1','id2')">검색
          </div>
        </div>

        @if ($errors->has('address'))
          <span class="help-block">
          <strong>{{ $errors->first('address') }}</strong>
      </span>
        @endif
      </div>
    </div>


    <!--
    desc: 숫자나 텍스트를 입력하는 일반 입력폼
    required: 숫자 또는 텍스트
    type: string
    -->

    <div class="form-group{{ $errors->has('form_string_addon') ? ' has-error' : '' }}">
      <label for="form_string_addon" class="col-md-3 control-label">String</label>

      <div class="col-md-8">
        <div class="input-group">
          <input id="form_string_addon" 
                 name="form_string_addon"
                 class="form-control"
                 value="{{ old('form_string_addon') }}" 
                 required>
          <div class="input-group-addon">필요시 사용</div>
        </div>
        @if ($errors->has('form_string_addon'))
          <span class="help-block">
              <strong>{{ $errors->first('form_string_addon') }}</strong>
          </span>
        @endif
      </div>
    </div>

    <div class="form-group{{ $errors->has('form_string') ? ' has-error' : '' }}">
      <label for="form_string" class="col-md-3 control-label">String(without addon)</label>

      <div class="col-md-8">
        <input id="form_string" name="form_string" type="text" class="form-control"
               value="{{ old('form_string') }}" required autofocus>

        @if ($errors->has('form_string'))
          <span class="help-block">
              <strong>{{ $errors->first('form_string') }}</strong>
          </span>
        @endif
      </div>
    </div>

    <!--
    desc: select box
    required: value
    type: string
    -->

    <div class="form-group{{ $errors->has('form_select_box') ? ' has-error' : '' }}">
      <label for="form_select_box" class="col-md-3 control-label">Select box</label>

      <div class="col-md-8">
        <select id="form_select_box" name="form_select_box" class="form-control">
          <option value="option1">option1</option>
          <option value="option2">option2</option>
          <option value="option3">option3</option>
        </select>

        @if ($errors->has('form_select_box'))
          <span class="help-block">
              <strong>{{ $errors->first('form_select_box') }}</strong>
          </span>
        @endif
      </div>
    </div>


    <!--
    desc: 날짜(일반적으로 bootstrap-datepicker 를 사용함)
    https://bootstrap-datepicker.readthedocs.io/en/latest/
    required: 특정날짜
    type: date
    -->
    <div class="form-group">
      <label for="birth_date" class="col-md-3 control-label">8. 생년월일</label>

      <div class="col-md-8">
        <div class="input-group date">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </div>
          <input type="text" id="birth_date" name="birth_date" class="form-control"
                 value="{{ old('birth_date') }}">
        </div>
      </div>
    </div>


    <!--
    desc: 기간이나 날짜 범위를 입력(일반적으로 bootstrap-datepicker 를 사용함)
    https://bootstrap-datepicker.readthedocs.io/en/latest/
    required: 시작일, 종료일
    type: date range
    -->

    <div class="form-group{{ $errors->has('contract_period') ? ' has-error' : '' }}">
      <label for="start" class="col-md-3 control-label">2. 계약기간</label>
      <label for="end" class="col-md-3 sr-only control-label"></label>

      <div class="col-md-8">

        <div class="input-group">
          <input type="text" id="start" name="contract_started_at" class="form-control date"
                 value="{{ old('start') }}">
          <div class="input-group-addon">~</div>
          <input type="text" id="end" name="end" class="form-control date"
                 value="{{ old('end') }}">
        </div>

        @if ($errors->has('start'))
          <span class="help-block">
              <strong>{{ $errors->first('start') }}</strong>
          </span>
        @endif
      </div>
    </div>


    <!--
    desc: 휴대전화번호 입력
    required: 010-0000-0000 형태의 값
    type: 숫자
    -->
    <div class="form-group{{ $errors->has('mobile1') ? ' has-error' : '' }}">
      <label for="mobile1" class="col-md-3 control-label">13. 휴대전화</label>
      <label for="mobile2" class="sr-only">휴대전화</label>
      <label for="mobile3" class="sr-only">휴대전화</label>

      <div class="col-md-8">

        <div class="input-group phone">
          <input id="mobile1" 
                 name="mobile[]" 
                 class="form-control"
                 placeholder="010">
          <span class="input-group-addon">-</span>
          <input id="mobile2" 
                 name="mobile[]" 
                 class="form-control"
                 placeholder="0000">
          <span class="input-group-addon">-</span>
          <input id="mobile3"
                 name="mobile[]"
                 class="form-control"
                 placeholder="0000">
        </div>
        @if ($errors->has('mobile'))
          <span class="help-block">
              <strong>{{ $errors->first('mobile') }}</strong>
          </span>
        @endif
      </div>
    </div>

    <!--
    desc: 라디오버튼이나 체크박스(css를 바꾸려면 아래 사이트 참고) inline을 하지 않으려면 클래스에서 inline 제거
    required: radio, check box
    type: 선택값

    -->
    <div class="form-group{{ $errors->has('box') ? ' has-error' : '' }}">
      <label for="box" class="col-md-3 control-label">15. 신청유형</label>

      <div class="col-md-8">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
        </label>

        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
        </label>

        @if ($errors->has('applying_type1'))
          <span class="help-block">
              <strong>{{ $errors->first('applying_type1') }}</strong>
          </span>
        @endif
      </div>
    </div>


  </div>
</div>