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

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

Tweet

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

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

1. \{Laravelプロジェクト}\composer.jsonのrequireに "laravelcollective/html": "~5.0"を追記する

"require": {
    "laravelcollective/html": "~5.0"
},

2. {Laravelプロジェクト}直下で以下のコマンドを実行する

composer update

Blade での使い方

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

{{ Form::open() }}

// Form の出力内容.

{{ Form::close() }}

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

{{ Form::open(['キー' => '値']) }}

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引数を連想配列ではなく、選択肢の配列にした場合はvalueが0から順に割り当てられます。
第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

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

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="削除">

Tweet

前の記事

Laravel にユーザー認証機能を追加する

次の記事

コントローラでのアップロードファイル操作|Laravel