Formファサードの使い方|Laravel

LaravelBladeではFormファザードを使ってフォーム画面の出力ができます。
BladeでFormファザードを使うために、まずインストールが必要です。

Formファザードのインストール

  1. \{Laravelプロジェクト}\composer.jsonrequire"laravelcollective/html": "~5.0"を追記する
"require": {
    "laravelcollective/html": "~5.0"
},
"laravelcollective/html": "~5.0""laravel/framework": "^6.0"のときにエラーになります。
この場合は"laravelcollective/html": "~6.0"とします。
  1. {Laravelプロジェクト}直下で以下のコマンドを実行する
composer update

Blade での使い方

下記でHTMLフォームの出力が可能です。

{{ Form::open() }}

// Form の出力内容.

{{ Form::close() }}

パラメータに連想配列を渡すことでactionHTTPメソッドを指定できます。

{{ Form::open(['キー' => '値']) }}
キー 内容 値の例
url action属性をurlで指定する '/sample/update'
action action属性をアクションメソッドで指定する 'SampleController@update'
method HTTPメソッドを指定する 'post'
files ファイルアップロードに対応する true

Formファサードのサンプル

{{ Form::open(['action' => 'SampleController@update', 'method' => 'post']) }}
<p>氏名<br />{{ Form::text('user_name', '', ['id' => 'user_name', 'size' => 50]) }}</p>
<p>住所<br />{{ Form::text('address', '', ['id' => 'address', 'size' => 50]) }}</p>
<div>
    {{ Form::reset('リセット', ['class' => 'btn btn-outline-success btn-lg']) }}
    {{ Form::submit('登録', ['name' => 'regist', 'class' => 'btn btn-success btn-lg']) }}
</div>
{{ Form::close() }}
出力
<form method="POST" action="http://localhost/laravel-prj/public/update" accept-charset="UTF-8">
<input name="_token" type="hidden" value="MdtDZDWrWpKMQ4d0sIciS8cSmGVYrmZfMQFO2EaR">
<p>氏名<br /><input id="user_name" size="50" name="user_name" type="text" value=""></p>
<p>住所<br /><input id="address" size="50" name="address" type="text" value=""></p>
<div>
    <input class="btn btn-outline-success btn-lg" type="reset" value="リセット">
    <input name="regist" class="btn btn-success btn-lg" type="submit" value="登録">
</div>
</form>

フォームの構成部品

以下、各種フォームの構成部品(コントロール)を出力する方法です。
コントロールのパラメータ(連想配列で指定)は付加する属性になります。

hiddenの出力

Form::hidden('pageNo', 1)
出力
<input name="pageNo" type="hidden" value="1">

Submit ボタン

Form::submit('更新', ['name' => 'update', 'class' => 'btn btn-primary', 'onfocus' => 'this.blur();'])
出力
<input name="update" class="btn btn-primary" onfocus="this.blur();" type="submit" value="更新">

リセットボタン

Form::reset('リセット', ['id' => 'reset-button', 'class' => 'btn btn-outline-success btn-lg'])
出力
<input id="reset-button" class="btn btn-outline-success btn-lg" type="reset" value="リセット">

ボタン

Form::button('追加', ['class' => 'btn btn-primary', 'onfocus' => 'this.blur();'])
Form::button('更新', ['type' => 'submit', 'class' => 'btn btn-primary', 'onfocus' => 'this.blur();'])
Form::button('リセット', ['type' => 'reset', 'class' => 'btn btn-outline-success btn-lg'])
出力
<button class="btn btn-primary" onfocus="this.blur();" type="button">追加</button>
<button type="submit" class="btn btn-primary" onfocus="this.blur();">更新</button>
<button type="reset" class="btn btn-outline-success btn-lg">リセット</button>

テキストフィールド

Form::text('comment', 'default value.', ['id' => 'comment', 'size' => 50])
出力
<input id="comment" size="50" name="comment" type="text" value="default value.">

メールアドレス

Form::email('user_mail', 'sample@mail.com', ['id' => 'user-mail'])
出力
<input id="user-mail" name="user_mail" type="email" value="sample@mail.com">

セレクトボックス

第2引数を連想配列ではなく、選択肢の配列にした場合はvalue0から順に割り当てられます。
第3引数は初期の選択値です。

Form::select('yaer', ['last' => '2018', 'current' => '2019', 'next' => '2020'], 'current', ['class' => 'form-control'])
出力
<select class="form-control" name="yaer">
    <option value="last">2018</option>
    <option value="current" selected="selected">2019</option>
    <option value="next">2020</option>
</select>

初期表示を非選択にする

追加属性にplaceholderを指定します。

Form::select('yaer', ['last' => '2018', 'current' => '2019', 'next' => '2020'], '', ['placeholder' => '年を選択してください', 'class' => 'form-control'])
出力
<select class="form-control" name="yaer">
    <option selected="selected" value="">年を選択してください</option>
    <option value="last">2018</option>
    <option value="current">2019</option>
    <option value="next">2020</option>
</select>

範囲指定選択

値は指定した範囲の値がそのまま使用されます。範囲と初期値は文字列でなく数値でも構いません。

Form::selectRange('yaer', '2018', '2020', '2019', ['class' => 'form-control'])
出力
<select class="form-control" name="yaer">
    <option value="2018">2018</option>
    <option value="2019" selected="selected">2019</option>
    <option value="2020">2020</option>
</select>

ラジオボタン

第1引数(フィールド名)が同じものが同じグループになります。

Form::radio('radio_name', 'option1', true, ['id' => 'radio-one', 'class' => 'form-check-input'])
Form::radio('radio_name', 'option2', false, ['id' => 'radio-two', 'class' => 'form-check-input'])

ラベル

Form::label('radio-one', '1', ['class' => 'form-check-label'])

ラジオボタンとラベルを使ったサンプルはこのようになります。

<div class="form-check form-check-inline">
    {{ Form::radio('radio_name', 'option1', true, ['id' => 'radio-one', 'class' => 'form-check-input']) }}
    {{ Form::label('radio-one', '1', ['class' => 'form-check-label']) }}
</div>
<div class="form-check form-check-inline">
    {{ Form::radio('radio_name', 'option2', false, ['id' => 'radio-two', 'class' => 'form-check-input']) }}
    {{ Form::label('radio-two', '2', ['class' => 'form-check-label']) }}
</div>
出力
<div class="form-check form-check-inline">
    <input id="radio-one" class="form-check-input" checked="checked" name="radio_name" type="radio" value="option1">
    <label for="radio-one" class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
    <input id="radio-two" class="form-check-input" name="radio_name" type="radio" value="option2">
    <label for="radio-two" class="form-check-label">2</label>
</div>

チェックボックス

Form::checkbox('check_name', 'value1', false, ['id' => 'check-id', 'class' => 'form-check-input'])

チェックボックスとラベルを使ったサンプルはこのようになります。

{{ Form::checkbox('check_name', 'value1', false, ['id' => 'check-id', 'class' => 'form-check-input']) }}
{{ Form::label('check-id', '1', ['class' => 'form-check-label']) }}
出力
<input id="check-id" class="form-check-input" name="check_name" type="checkbox" value="value1">
<label for="check-id" class="form-check-label">1</label>

ファイルアップロード

フォームでファイルアップロードを有効にするにはForm::open([])'files' => trueを指定しておきます。

Form::file('addimage', ['id' => 'add-image'])
出力
<input id="add-image" name="addimage" type="file">

disabledとreadonly

disabledreadonlyを付けたい場合はパラメータ配列に文字列だけで追加します。

readonly

Form::text('name', 'Sender name.', ['id' => 'name', 'readonly', 'size' => 50])
出力
<input id="name" readonly size="50" name="name" type="text" value="Sender name.">

disabled

Form::submit('削除', ['name' => 'delete', 'id' => 'delete-btn', 'class' => 'btn btn-secondary btn-lg', 'disabled'])
出力
<input name="delete" id="delete-btn" class="btn btn-secondary btn-lg" disabled type="submit" value="削除">
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です