HTML Collective là một package hỗ trợ cho Laravel dùng để xây dựng các Form HTML. Để sử dụng Laravel Collective bạn chạy câu lệnh terminal sau: composer require laravelcollective/html Thêm Provider và Aliases vào file config/app.php:
// ...
'providers' => [
// ...
Collective\Html\HtmlServiceProvider::class,
// ...
],
// ...
'aliases' => [
// ...
'Form' => Collective\Html\FormFacade::class,
'Html' => Collective\Html\HtmlFacade::class,
// ...
],
// ...
1. Mở đóng thẻ form html:
{!! Form::open(['method' => 'POST', 'url' => 'foobar']) !!}
//
{!! Form::close() !!}
Đoạn code trên generate ra HTML như sau:
Ngoài ra, bạn có thể sử dụng routes đã được định nghĩa hoặc controller@action để binding ra action của thẻ form HTML:
Form::open(['method' => 'POST', 'action' => 'HomeController@fooBar'])
Form::open(['method' => 'POST', 'routes' => 'home.foobar'])
2. Truyền biến qua form:
Form::open(['method' => 'POST', 'url' => "foobar/$id"])
Form::open(['method' => 'POST', 'action' => ['HomeController@fooBar', 'id' => $id]])
Form::open(['method' => 'POST', 'routes' => ['home.foobar', 'id' => $id]])
Nếu form cho phép upload files thì thêm option files:
Form::open(['method' => 'POST', 'url' => 'foobar', 'files' => true])
3. Generate các thẻ HTML input(text, textarea, radio, select, checkbox):
// Generating A Label Element
Form::label('email', 'E-Mail Address')
<label for="email">E-Mail Address</label>
// Generating A Text Input
Form::text('username')
<input name="username" type="text">
Form::text('username', 'tieppt')
<input name="username" type="text" value="tieppt">
// Generating A Hidden Input
Form::hidden('username')
<input name="username" type="hidden">
// Generating A Password Input
Form::password('password', ['class' => 'awesome'])
<input name="password" type="password" value="" class="awesome">
// Generating A Email Input
Form::email('email')
<input name="email" type="email" value>
Form::text('email', 'example@gmail.com')
<input name="email" type="email" value="example@gmail.com">
// Generating A File Input
Form::file('file')
<input name="file" type="file">
// Generating A Checkbox Input
Form::checkbox('hobbies', 'value')
<input name="hobbies" type="checkbox" value="value">
Form::checkbox('hobbies', 'value', true)
<input checked="checked" name="hobbies" type="checkbox" value="value">
// Generating A Radio Input
Form::radio('name', 'value')
<input name="role" type="radio" value="value">
Form::radio('name', 'value', true)
<input checked="checked" name="role" type="radio" value="value">
// Generating A Number Input
Form::number('number', 1)
<input name="number" type="number" value="1">
// Generating A Date Input
Form::date('dob', \Carbon\Carbon::now())
<input name="dob" type="date" value="2017-04-23">
// Generating A Select Options
Form::select('size', ['L' => 'Large', 'S' => 'Small'])
<select name="size">
<option value="L">Large</option>
<option value="S">Small</option>
</select>
// Generating A Checkboxes
Form::select('size', ['L' => 'Large', 'S' => 'Small'], null, ['multiple' => true])
<select multiple="multiple" name="size">
<option value="L">Large</option>
<option value="S">Small</option>
</select>
// Generating A Grouped List
{!! Form::select('animal',[
'Cats' => ['leopard' => 'Leopard'],
'Dogs' => ['spaniel' => 'Spaniel'],
]) !!}
<select name="animal">
<optgroup label="Cats">
<option value="leopard">Leopard</option>
</optgroup>
<optgroup label="Dogs">
<option value="spaniel">Spaniel</option>
</optgroup>
</select>
// Generating A Drop-Down List With A Range
Form::selectRange('number', 10, 15)
<select 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>
// Generating A List With Month Names
Form::selectMonth('month')
<select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
//Generating A Button
Form::submit('Click Me!')
<input type="submit" value="Click Me!">
Form::reset('Click Me!')
<input type="reset" value="Click Me!">
Form::button('Click Me!')
<button type="button">Click Me!</button>
4. Binding dữ liệu vào form:
{!! Form::open(['method' => 'PATCH', 'route' => ['users.update', $user->id]]) !!}
{!! Form::text('name', $user->name) !!}
{!! Form::text('email', $user->email) !!}
{!! Form::close() !!}
// Bind dữ liệu bằng form model. Các attributes value của thẻ input sẽ tự động match với các value của key tương ứng trong model $user
{!! Form::model($user, ['method' => 'PATCH', 'route' => ['users.update', $user->id]]) !!}
{!! Form::text('name') !!}
{!! Form::text('email') !!}
{!! Form::close() !!}
Kết quả:
5. 1 số truờng hợp binding dữ liệu cụ thể
Selected option khi hiển thị dữ liệu
Form::select('size', ['L' => 'Large', 'M' => 'Medium', 'S' => 'Small'], 'S')
// Kết quả
<select name="size">
<option value="L">Large</option>
<option value="S" selected>Small</option>
</select>
Form::select('size', ['L' => 'Large', 'M' => 'Medium', 'S' => 'Small'], ['S', 'M'], ['multiple' => true])
// Kết quả
<select multiple="multiple" name="size">
<option value="L">Large</option>
<option value="M" selected="selected">Medium</option>
<option value="S" selected="selected">Small</option>
</select>
Checked checkboxes:
Form::checkbox('hobbies', 'value', true)
// Kết quả
<input checked="checked" name="hobbies" type="checkbox" value="value">
$sizes = ['L' => 'Large', 'M' => 'Medium', 'S' => 'Small'];
$checkedSizes = ['L' => 'Large', 'S' => 'Small'];
@foreach ($sizes as $size)
Form::checkbox('checkbox', $size, in_array($size, $checkedSizes))
@endforeach
// Kết quả
<input name="checkbox" type="checkbox" value="Large" checked="checked">
<input name="checkbox" type="checkbox" value="Medium">
<input name="checkbox" type="checkbox" value="Small" checked="checked">
Form model hiển thị
Form::model($user, ['route' => ['users.update', $user->id]])
Form::email('email')
Form::text('username')
Form::password('password')
Form::close()
// Các attributes value của thẻ input sẽ tự động match với các value của key tương ứng trong model $user
// Kết quả
<form method="POST" action="http://localhost:8888/users/1" accept-charset="UTF-8">
<input name="email" type="email" value="admin@tieppt.com" id="email">
<input name="username" type="text" value="admin">
<input name="password" type="password" value="">
</form>
Unpublished comment
Viết câu trả lời