Laravel Collective(Formファサード まとめ)

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

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

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

 

完成形

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

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

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

 

インストール

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

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


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

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

 

実演

 

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ファサードの使い方については以上になります。

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-実践知識