Laravel Collective（Formファサードまとめ）

2020/09/08 2022/03/05

Laravel のFormファサードを使うと、HTML のフォームタグがすっきりします。

このFormファサードを利用するためには、composer で「Laravel Collective」というパッケージをインストールする必要があります。

今回は Laravel Collective を使ってFormファサードでHTMLフォームを作成してみます。

完成形

以前、テンプレートで作成したBladeのファイルをベースに作成していきます。

Blade レイアウト定義 × Bootstrap Snippets

完成形のデモページは以下になります。

デモサイト

（※このページの下に、ソースコードも紹介しています）

インストール

Composer で「Laravel Collective」パッケージをインストールします。

現在はいっている Laravel のバージョンが 6 なので Laravel Collective も 6 をいれます。


$ composer require "laravelcollective/html":"6.*"

上記のコマンドを実行すれば、Formファサードを利用することができます。

実演

「class」「placeholder」「style」などの追加の属性（Formファサード）

Formファサードの第三引数に連想配列として記述していく。

Formファサードの引数

第一引数：name属性の値
第二引数：value属性の値
第三引数：「class」「placeholder」など追加の属性


# HTML
<input type="text" class="form-control" id="lastName" placeholder="名字">

# Formファサード
{{Form::text('lastName', null, ['class' => 'form-control', 'id' => 'lastName', 'placeholder' => '名字'])}}

フォームタグ


# HTML
<form method="POST" action="http://localhost" accept-charset="UTF-8" enctype="multipart/form-data">
# Formファサード
{{Form::open(['url' => '/', 'files' => true])}}

# HTML
</form>
# Formファサード
{{Form::close()}}

url キー（連想配列）：ルーティングアクション
files キー（連想配列）：input=file の可否

CSRFトークン


# HTML
<input name="_token" type="hidden" value="UZ1F5pH9aZRV3X0m9SToGaLKACD7cmw2Dn7c2ym8">

# Formファサード
{{Form::token()}}

ラベル


# HTML
<label for="name">氏名</label>

# Formファサード
{{Form::label('name','氏名')}}

テキスト

input type="text"

Formファサードの text()メソッドを使います。


# HTML
<input class="form-control" id="inputName" placeholder="氏名" name="inputName" type="text">

# Formファサード
{{Form::text('inputName', null, ['class' => 'form-control', 'id' => 'inputName', 'placeholder' => '氏名'])}}

第一引数：HTMLフォームの name属性
第二引数：HTMLフォームの value属性
第三引数：追加属性（連想配列形式）

input type="email"

Formファサードの email()メソッドを使います。


# HTML
<input class="form-control" id="inputEmail" placeholder="Eメール" name="inputEmail" type="email">

# Formファサード
{{Form::email('inputEmail', null, ['class' => 'form-control','id' => 'inputEmail','placeholder' => 'Eメール'])}}

第一引数：HTMLフォームの name属性
第二引数：HTMLフォームの value属性
第三引数：追加属性（連想配列形式）

input type="password"

Formファサードの password()メソッドを使います。


# HTML
<input class="form-control" id="inputPassword" placeholder="パスワード" name="inputPassword" type="password" value="">

# Formファサード
{{Form::password('inputPassword', ['class' => 'form-control','id' => 'inputPassword','placeholder' => 'パスワード'])}}

第一引数：HTMLフォームの name属性
第二引数：追加属性（連想配列形式）

※HTMLフォームの value属性は設定項目にないので注意

ラジオボタン

Formファサードのraido()メソッドを使います。


# HTML
<input class="custom-control-input" id="radioGender1" checked="checked" name="raidoGender" type="radio" value="女性">

# Formファサード
{{Form::radio('raidoGender', '女性', true, ['class'=>'custom-control-input','id'=>'radioGender1'])}}

第一引数：ラジオボタンの name属性
第二引数：value値
第三引数：デフォルトの checked
第四引数：追加属性（連想配列形式）

チェックボックス

Formファサードのcheckbox()メソッドを使います。


# HTML
<input class="custom-control-input" id="checkSkill1" name="checkSkill" type="checkbox" value="PHP／Laravel">

# Formファサード
{{Form::checkbox('checkSkill', 'PHP／Laravel', false, ['class'=>'custom-control-input','id'=>'checkSkill1'])}}

第一引数：チェックボックスの name属性
第二引数：value値
第三引数：デフォルトの checked
第四引数：追加属性（連想配列形式）

プルダウンメニュー

Formファサードのselect()メソッドを使います。


# HTML
<select class="form-control" id="selectEvalute" name="selectEvaluate">
  <option value="good">よかった</option>
  <option value="ordinarily" selected="selected">普通</option>
  <option value="bad">悪い</option>
</select>

# Formファサード
{{Form::select('selectEvaluate', ['good' => 'よかった', 'ordinarily' => '普通', 'bad' => '悪い'], 'ordinarily', ['class' => 'form-control','id' => 'selectEvalute'])}}

第一引数：プルダウンメニューの name属性
第二引数：連想配列形式 [ 'value値'=> '選択肢']
第三引数：デフォルトの selected
第四引数：追加属性（連想配列形式）

ファイル

Formファサードのfile()メソッドを使います。


# HTML
<input class="custom-file-input" id="fileImage" name="image" type="file">

# Formファサード
{{Form::file('image', ['class'=>'custom-file-input','id'=>'fileImage'])}}

第一引数：input type="file" の name属性
第二引数：追加属性（連想配列形式）

※フォームタグの 'files' => true が必要

テキストエリア

Formファサードのtextarea()メソッドを使います。


# HTML
<textarea class="form-control" id="textareaRemarks" placeholder="その他、質問などありましたら" rows="3" name="textareaRemarks" cols="50"></textarea>

# Formファサード
{{Form::textarea('textareaRemarks', null, ['class' => 'form-control', 'id' => 'textareaRemarks', 'placeholder' => 'その他、質問などありましたら', 'rows' => '3'])}}

基本、text()メソッドと同じ構文になります。

ボタン

Formファサードのsubmit()メソッドを使います。


# HTML
<input class="btn btn-primary btn-block" type="submit" value="送信">

# Formファサード
{{Form::submit('送信', ['class'=>'btn btn-primary btn-block'])}}

第一引数：ボタンに表示する文字
第二引数：追加属性（連想配列形式）

デモページのソースコード


{{Form::open(['url' => '/', 'files' => true])}}
{{Form::token()}}<!--CSRFトークン-->

<!--氏名-->
<div class="form-group row">
<div class="col-md-2 mb-3">
{{Form::label('inputName','氏名')}}
</div>
<div class="col-md-10">
{{Form::text('inputName', null, ['class' => 'form-control','id' => 'inputName','placeholder' => '氏名'])}}
</div>
</div>
<!--/氏名-->

<!--Eメール-->
<div class="form-group row">
<div class="col-md-2 mb-3">
{{Form::label('inputEmail','Eメール')}}
</div>
<div class="col-md-10">
{{Form::email('inputEmail', null, ['class' => 'form-control','id' => 'inputEmail','placeholder' => 'Eメール'])}}
</div>
</div>
<!--/Eメール-->

<!--パスワード-->
<div class="form-group row">
<div class="col-md-2 mb-3">
{{Form::label('inputPassword','パスワード')}}
</div>
<div class="col-md-10 mb-3">
{{Form::password('inputPassword', ['class' => 'form-control','id' => 'inputPassword','placeholder' => 'パスワード'])}}
<small id="passwordHelpBlock" class="form-text text-muted">パスワードは、文字と数字を含めて8～20文字で、空白、特殊文字、絵文字を含むことはできません。</small>
</div>
</div>
<!--/パスワード-->

<!--性別-->
<div class="form-group row">
<legend class="col-form-label col-md-2 mb-3">性別</legend>
<div class="col-md-10">
<div class="custom-control custom-radio custom-control-inline">
{{Form::radio('raidoGender', '女性', true, ['class'=>'custom-control-input','id'=>'radioGender1'])}}
{{Form::label('radioGender1','女性',['class'=>'custom-control-label'])}}
</div>
<div class="custom-control custom-radio custom-control-inline">
{{Form::radio('raidoGender', '男性', false, ['class'=>'custom-control-input','id'=>'radioGender2'])}}
{{Form::label('radioGender2','男性',['class'=>'custom-control-label'])}}
</div>
</div>
</div>
<!--/性別-->

<!--スキル-->
<div class="form-group row">
<div class="col-md-2 mb-3">スキル</div>
<div class="col-md-10">
<div class="custom-control custom-checkbox custom-control-inline">
{{Form::checkbox('checkSkill', 'PHP／Laravel', false, ['class'=>'custom-control-input','id'=>'checkSkill1'])}}
{{Form::label('checkSkill1','PHP／Laravel',['class'=>'custom-control-label'])}}
</div>
<div class="custom-control custom-checkbox custom-control-inline">
{{Form::checkbox('checkSkill', 'Ruby on Rails', false, ['class'=>'custom-control-input','id'=>'checkSkill2'])}}
{{Form::label('checkSkill2','Ruby on Rails',['class'=>'custom-control-label'])}}
</div>
<div class="custom-control custom-checkbox custom-control-inline">
{{Form::checkbox('checkSkill', 'Vue.js', false, ['class'=>'custom-control-input','id'=>'checkSkill3'])}}
{{Form::label('checkSkill3','Vue.js',['class'=>'custom-control-label'])}}
</div>
</div>
</div>
<!--/スキル-->

<!--評価-->
<div class="form-group pb-3">
{{Form::label('selectEvalute','評価')}}
{{Form::select('selectEvaluate', ['good' => 'よかった', 'ordinarily' => '普通', 'bad' => '悪い'], 'ordinarily', ['class' => 'form-control','id' => 'selectEvalute'])}}
</div>
<!--/評価-->

<!--ファイル選択-->
<div class="custom-file mb-5">
{{Form::file('image', ['class'=>'custom-file-input','id'=>'fileImage'])}}
{{Form::label('fileImage','ファイル選択...',['class'=>'custom-file-label'])}}
</div>
<!--/ファイル選択-->

<!--備考欄-->
<div class="form-group mb-3">
{{Form::label('textareaRemarks','備考欄')}}
{{Form::textarea('textareaRemarks', null, ['class' => 'form-control', 'id' => 'textareaRemarks', 'placeholder' => 'その他、質問などありましたら', 'rows' => '3'])}}
</div>
<!--/備考欄-->

<!--ボタンブロック-->
<div class="form-group row">
<div class="col-sm-12">
{{Form::submit('送信', ['class'=>'btn btn-primary btn-block'])}}
</div>
</div>
<!--/ボタンブロック-->

{{Form::close()}}<!--</form>-->

Formファサードの使い方については以上になります。