Forms & HTMLでformを作成

Tag:

ヘルパー関数パッケージである「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() !!}

// 生成されるHTML
<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() !!}

// 生成されるHTML
<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() !!}

// 生成されるHTML
<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クラスのメソッドを利用してフォーム部品を作成してみます。

なお、メソッドの引数ですが、

第1引数:name属性の値を指定
最後の引数:その他の属性(classなど)を連想配列で指定

となっているメソッドが多いようです(例外もあります)

ラベル

{!! Form::label('email', 'ラベル', ['class' => 'xxxxx']) !!}

// 生成されるHTML
<label for="email" class="xxxxx">ラベル</label>

テキスト

{!! Form::text('name', '', ['class' => 'xxxxx', 'placeholder' => 'プレースホルダー']) !!}

// 生成されるHTML
<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>

// 生成されるHTML
<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>

// 生成されるHTML
<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]) !!}

// 生成されるHTML
<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]) !!}

// 生成されるHTML
<textarea class="xxxxx" rows="10" name="body" cols="50"></textarea>

ボタン

{!! Form::button('ボタン', ['class' => 'xxxxx']) !!}

// 生成されるHTML
<button class="xxxxx" type="button">ボタン</button>

その他

{!! 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']) !!}

// 生成されるHTML
<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">
{!! Form::select('animal', ['Cats' => ['leopard' => 'Leopard'],'Dogs' => ['spaniel' => 'Spaniel']], null, ['class' => 'xxxxx']) !!}

// 生成されるHTML
<select class="xxxxx" name="animal">
    <optgroup label="Cats"><option value="leopard">Leopard</option></optgroup>
    <optgroup label="Dogs"><option value="spaniel">Spaniel</option></optgroup>
</select>
{!! Form::selectRange('number', 10, 15, null, ['class' => 'xxxxx']) !!}

// 生成されるHTML
<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>
<?php setlocale(LC_TIME, 'ja_JP.UTF-8'); ?>
{!! Form::selectMonth('month', ['class' => 'xxxxx']) !!}

// 生成されるHTML
<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>

スポンサーリンク