ヘルパー関数パッケージである「Forms & HTML」でformを作成してみます。
「Forms & HTML」の使い方は、https://laravelcollective.com/docs/5.3/htmlで解説されてますが、実際にどのようなHTMLが生成されるのか確認してみます。
目次
formタグ生成
POSTメソッドのフォーム
{!! Form::open(['url' => 'foo/bar']) !!}
{!! Form::submit('Click Me!', ['class' => 'xxxxx']) !!}
{!! Form::close() !!}<form method="POST" action="http://localhost:8000/foo/bar" accept-charset="UTF-8">
<input name="_token" type="hidden" value="xxxxxxxxxxxxxxxxxxxxx">
<input class="xxxxx" type="submit" value="Click Me!">
</form>PUTメソッドのフォーム
{!! Form::open(['url' => 'foo/bar', 'method' => 'put']) !!}
{!! Form::submit('Click Me!', ['class' => 'xxxxx']) !!}
{!! Form::close() !!}<form method="POST" action="http://localhost:8000/foo/bar" accept-charset="UTF-8">
<input name="_method" type="hidden" value="PUT">
<input name="_token" type="hidden" value="xxxxxxxxxxxxxxxxxxxxx">
<input class="xxxxx" type="submit" value="Click Me!">
</form>get、deleteも同様に作成できます。
ファイルアップロードする場合
{!! Form::open(['url' => 'foo/bar', 'files' => true]) !!}
{!! Form::submit('Click Me!', ['class' => 'xxxxx']) !!}
{!! Form::close() !!}<form method="POST" action="http://localhost:8000/foo/bar" accept-charset="UTF-8" enctype="multipart/form-data">
<input name="_token" type="hidden" value="xxxxxxxxxxxxxxxxxxxxx">
<input class="xxxxx" type="submit" value="Click Me!">
</form>フォーム部品の作成
Formクラスのメソッドを利用してフォーム部品を作成してみます。
なお、メソッドの引数ですが、
- 第１引数：name属性の値を指定
- 最後の引数：その他の属性(classなど)を連想配列で指定
となっているメソッドが多いようです(例外もあります)
ラベル
{!! Form::label('email', 'ラベル', ['class' => 'xxxxx']) !!}<label for="email" class="xxxxx">ラベル</label>テキスト
{!! Form::text('name', '', ['class' => 'xxxxx', 'placeholder' => 'プレースホルダー']) !!}<input class="xxxxx" placeholder="プレースホルダー" name="name" type="text" value="">単一選択
<label>{!! Form::radio('radio', 1, false, ['class' => 'xxxxx']) !!}radio1</label>
<label>{!! Form::radio('radio', 2, true, ['class' => 'xxxxx']) !!}radio2</label>
<label>{!! Form::radio('radio', 3, false, ['class' => 'xxxxx']) !!}radio3</label><label><input class="xxxxx" name="radio" type="radio" value="1">radio1</label>
<label><input class="xxxxx" checked="checked" name="radio" type="radio" value="2">radio2</label>
<label><input class="xxxxx" name="radio" type="radio" value="3">radio3</label>複数選択
<label>{!! Form::checkbox('checkbox[]', 'あああ', true, ['class' => 'xxxxx']) !!}あああ</label>
<label>{!! Form::checkbox('checkbox[]', 'いいい', false, ['class' => 'xxxxx']) !!}いいい</label>
<label>{!! Form::checkbox('checkbox[]', 'ううう', true, ['class' => 'xxxxx']) !!}ううう</label><label><input class="xxxxx" checked="checked" name="checkbox[]" type="checkbox" value="あああ">あああ</label>
<label><input class="xxxxx" name="checkbox[]" type="checkbox" value="いいい">いいい</label>
<label><input class="xxxxx" checked="checked" name="checkbox[]" type="checkbox" value="ううう">ううう</label>プルダウン形式
{!! Form::select('size', ['L' => 'Large', 'S' => 'Small'], 'S', ['placeholder' => 'Pick a size...']) !!}<select name="size">
<option value="">Pick a size...</option>
<option value="L">Large</option>
<option value="S" selected="selected">Small</option>
</select>リスト形式
{!! Form::select('size', ['L' => 'Large', 'S' => 'Small'], 'S', ['placeholder' => 'Pick a size...', 'multiple' => true, 'size' => 2]) !!}<select multiple="1" size="2" name="size">
<option value="">Pick a size...</option>
<option value="L">Large</option>
<option value="S" selected="selected">Small</option>
</select>複数行入力可能なテキスト
{!! Form::textarea('body', null, ['class' => 'xxxxx', 'rows' => 10]) !!}<textarea class="xxxxx" rows="10" name="body" cols="50"></textarea>ボタン
{!! Form::button('ボタン', ['class' => 'xxxxx']) !!}<button class="xxxxx" type="button">ボタン</button>type指定
{!! Form::hidden('hidden', 100) !!}
{!! Form::password('password', ['class' => 'xxxxx']) !!}
{!! Form::email('email', null, ['class' => 'xxxxx']) !!}
{!! Form::file('file', ['class' => 'xxxxx']) !!}
{!! Form::number('name', 'value', ['class' => 'xxxxx']) !!}
{!! Form::date('name', \Carbon\Carbon::now(), ['class' => 'xxxxx']) !!}
{!! Form::image('foo/bar/image.jpg', 'image', ['class' => 'xxxxx']) !!}<input name="hidden" type="hidden" value="100">
<input class="xxxxx" name="password" type="password" value="">
<input class="xxxxx" name="email" type="email" id="email">
<input class="xxxxx" name="file" type="file">
<input class="xxxxx" name="name" type="number" value="value">
<input class="xxxxx" name="name" type="date" value="2017-01-28">
<input class="xxxxx" src="http://localhost:8000/foo/bar/image.jpg" name="image" type="image">optgroup
{!! Form::select('animal', ['Cats' => ['leopard' => 'Leopard'],'Dogs' => ['spaniel' => 'Spaniel']], null, ['class' => 'xxxxx']) !!}<select class="xxxxx" name="animal">
<optgroup label="Cats"><option value="leopard">Leopard</option></optgroup>
<optgroup label="Dogs"><option value="spaniel">Spaniel</option></optgroup>
</select>selectRange
{!! Form::selectRange('number', 10, 15, null, ['class' => 'xxxxx']) !!}<select class="xxxxx" name="number">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>selectMonth
<?php setlocale(LC_TIME, 'ja_JP.UTF-8'); ?>
{!! Form::selectMonth('month', ['class' => 'xxxxx']) !!}<select name="month">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
