公開日: 2020-01-09
更新日: 2020-05-27

Laravelで入力に使うフォーム

Laravelで使うフォーム一式

Laravel Bladeでフォームの入力に使うウィジェットをテンプレート化して再利用できるようにしました。
以下にinput text、textarea、select、input radio、input checkboxを取り上げます。
input dateやinput numberなどはinput textのバリエーションと考えて、ここでは紹介を割愛します。

<div class="form-group has-success pv4">
  <label class="form-label" @isset($id) for="{{ $id }}" @endisset>
    {{ $title }}
  </label>
  <input  class="form-input"
          type="text"
          @if(isset($autofocus) && $autofocus) autofocus @endisset
          @if(isset($disabled)  && $disabled) disabled @endisset
          @if(isset($readonly)  && $readonly) readonly @endisset
          @if(isset($required)  && $required) required @endisset
          @isset($autocomplete) autocomplete="{{ $autocomplete }}" @endisset
          @isset($form)         form="{{ $form }}" @endisset
          @isset($id)           id="{{ $id }}" @endisset
          @isset($list)         list="{{ $list }}" @endisset
          @isset($name)         name="{{ $name }}" @endisset
          @isset($tabindex)     tabindex="{{ $tabindex }}" @endisset
          @isset($minlength) minlength="{{ $minlength }}" @endisset
          @isset($maxlength) maxlength="{{ $maxlength }}" @endisset
          @isset($size) size="{{ $size }}" @endisset
          @isset($pattern) pattern="{{ $pattern }}" @endisset
          @isset($placeholder) placeholder="{{ $placeholder }}" @endisset
          @isset($value) value="{{ $value }}" @endisset
          @if(isset($spellcheck) && $spellcheck) spellcheck @endif
  >
  @if(isset($required) && $required)
  <p class="form-input-hint">This field is required.</p>
  @endif
  @if(isset($required) && !$required)
  <p class="form-input-hint">This field is optional.</p>
  @endif
</div>
            
@include('forms.text', [
  'title' => 'Your Name',
  'required' => true,
  'name' => 'name',
  'value' => 'Ichiro Yamamoto',
])
            
<div class="form-group has-success pv4">
  <label class="form-label" @isset($id) for="{{ $id }}" @endisset>
    {{ $title }}
  </label>
  <textarea class="form-input"
            @if(isset($autofocus) && $autofocus) autofocus @endisset
            @if(isset($disabled)  && $disabled) disabled @endisset
            @if(isset($readonly)  && $readonly) readonly @endisset
            @if(isset($required)  && $required) required @endisset
            @isset($autocomplete) autocomplete="{{ $autocomplete }}" @endisset
            @isset($form)         form="{{ $form }}" @endisset
            @isset($id)           id="{{ $id }}" @endisset
            @isset($list)         list="{{ $list }}" @endisset
            @isset($name)         name="{{ $name }}" @endisset
            @isset($tabindex)     tabindex="{{ $tabindex }}" @endisset
            @isset($minlength) minlength="{{ $minlength }}" @endisset
            @isset($maxlength) maxlength="{{ $maxlength }}" @endisset
            @isset($size) size="{{ $size }}" @endisset
            @isset($pattern) pattern="{{ $pattern }}" @endisset
            @isset($placeholder) placeholder="{{ $placeholder }}" @endisset
            @isset($cols) cols="{{ $cols }}" @endisset
            @isset($rows) rows="{{ $rows }}" @endisset
            @isset($wrap) wrap="{{ $wrap }}" @endisset
            @if(isset($spellcheck) && $spellcheck) spellcheck @endif
  >
    @isset($value) {{ $value }} @endif
  </textarea>
  @if(isset($required) && $required)
  <p class="form-input-hint">This field is required.</p>
  @endif
  @if(isset($required) && !$required)
  <p class="form-input-hint">This field is optional.</p>
  @endif
</div>
            
@include('forms.textarea', [
  'title' => 'Introduction',
  'required' => true,
  'name' => 'introduction',
])
            

@php
  $name_of_value = isset($name_of_value) ? $name_of_value : 'id';
  $name_of_text  = isset($name_of_text)  ? $name_of_text  : 'name';
@endphp
<div class="form-group has-success pv4">
  <label class="form-label" @isset($id) for="{{ $id }}" @endisset>
    {{ $title }}
  </label>
  <select class="form-select"
          @if(isset($autofocus) && $autofocus) autofocus @endisset
          @if(isset($disabled)  && $disabled) disabled @endisset
          @if(isset($readonly)  && $readonly) readonly @endisset
          @if(isset($required)  && $required) required @endisset
          @isset($autocomplete) autocomplete="{{ $autocomplete }}" @endisset
          @isset($form)         form="{{ $form }}" @endisset
          @isset($id)           id="{{ $id }}" @endisset
          @isset($list)         list="{{ $list }}" @endisset
          @isset($name)         name="{{ $name }}" @endisset
          @isset($tabindex)     tabindex="{{ $tabindex }}" @endisset
          @if(isset($multiple) && $multiple) multiple @endisset
  >
  @foreach($collection as $element)
    <option @isset($element[$name_of_value]) value="{{ $element[$name_of_value] }}" @endisset
            @if(isset($value) && is_array($value) && in_array($element[$name_of_value], $value))
              selected
            @elseif(isset($value) && !is_array($value) && $value == $element[$name_of_value])
              selected
            @endif
    >
      {{ $element[$name_of_text] }}
    </option>
  @endforeach
  </select>
  @if(isset($required) && $required)
  <p class="form-input-hint">This field is required.</p>
  @endif
  @if(isset($required) && !$required)
  <p class="form-input-hint">This field is optional.</p>
  @endif
</div>

            

@include('forms.select', [
  'title' => 'Sex',
  'required' => true,
  'name' => 'sex_id',
  'collection' => $sexes,
  'value' => 1,
])

            

@php
  $name_of_value = isset($name_of_value) ? $name_of_value : 'id';
  $name_of_text  = isset($name_of_text)  ? $name_of_text  : 'name';
@endphp
<div class="form-group has-success pv4">
  <label class="form-label" @isset($id) for="{{ $id }}" @endisset>
    {{ $title }}
  </label>
  @foreach($collection as $element)
  <label class="form-radio">
    <input  type="radio"
            @if(isset($autofocus) && $autofocus) autofocus @endisset
            @if(isset($disabled)  && $disabled) disabled @endisset
            @if(isset($readonly)  && $readonly) readonly @endisset
            @if(isset($required)  && $required) required @endisset
            @isset($autocomplete) autocomplete="{{ $autocomplete }}" @endisset
            @isset($form)         form="{{ $form }}" @endisset
            @isset($id)           id="{{ $id }}" @endisset
            @isset($list)         list="{{ $list }}" @endisset
            @isset($name)         name="{{ $name }}" @endisset
            @isset($tabindex)     tabindex="{{ $tabindex }}" @endisset
            @isset($element[$name_of_value]) value="{{ $element[$name_of_value] }}" @endisset
            @if(isset($value) && $value == $element[$name_of_value]) checked @endif
    >
    <i class="form-icon"></i>{{ $element[$name_of_text] }}
  </label>
  @endforeach
  @if(isset($required) && $required)
  <p class="form-input-hint">This field is required.</p>
  @endif
  @if(isset($required) && !$required)
  <p class="form-input-hint">This field is optional.</p>
  @endif
</div>

            

@include('forms.radio', [
  'title' => 'Sex',
  'required' => true,
  'name' => 'sex_id',
  'collection' => $sexes,
  'value' => 2,
])

            

@php
  $name_of_value = isset($name_of_value) ? $name_of_value : 'id';
  $name_of_text  = isset($name_of_text)  ? $name_of_text  : 'name';
@endphp
<div class="form-group has-success pv4">
  <label class="form-label" @isset($id) for="{{ $id }}" @endisset>
    {{ $title }}
  </label>
  @foreach($collection as $element)
  <label class="form-checkbox">
    <input  type="checkbox"
            @if(isset($autofocus) && $autofocus) autofocus @endisset
            @if(isset($disabled)  && $disabled) disabled @endisset
            @if(isset($readonly)  && $readonly) readonly @endisset
            @if(isset($required)  && $required) required @endisset
            @isset($autocomplete) autocomplete="{{ $autocomplete }}" @endisset
            @isset($form)         form="{{ $form }}" @endisset
            @isset($id)           id="{{ $id }}" @endisset
            @isset($list)         list="{{ $list }}" @endisset
            @isset($name)         name="{{ $name }}" @endisset
            @isset($tabindex)     tabindex="{{ $tabindex }}" @endisset
            @isset($element[$name_of_value]) value="{{ $element[$name_of_value] }}" @endisset
            @if(isset($value) && is_array($value) && in_array($element[$name_of_value], $value))
              checked
            @elseif(isset($value) && !is_array($value) && $value == $element[$name_of_value])
              checked
            @endif
    >
    <i class="form-icon"></i>{{ $element[$name_of_text] }}
  </label>
  @endforeach
  @if(isset($required) && $required)
  <p class="form-input-hint">This field is required.</p>
  @endif
  @if(isset($required) && !$required)
  <p class="form-input-hint">This field is optional.</p>
  @endif
</div>

            

@include('forms.checkbox', [
  'title' => 'Sex',
  'required' => true,
  'name' => 'sex_id',
  'collection' => $sexes,
  'value' => [1, 2],
])

            

select、radio、checkboxの選択肢には、Eloquentのモデルを渡します。
また、checkboxのvalueには、1つの引数もしくは配列を指定できます。
実行すると以下の画面が表示されます。 実行例