HTML Collective - Phần 2

Bài đăng này đã không được cập nhật trong 7 năm

... Hôm nay mình xin tiếp tục với serri về bài HTML collective của mình ))))) mục này mình xin được giới thiệu một vàu thành phần của HTML Collective

I. Label

Để định nghĩa một label bằng cách sử dụng HTML Collective, bạn khai báo cú pháp như sau:

Form::label('email', 'E-Mail Address')

Trong đó tham số 'email' cho phép chỉ định ra attribute name của label, lúc này label có name="email" khi biên dịch ra HTML. Và 'E-Mail Address' sẽ chính là value của label đó. Bây giờ, nếu bạn muốn định nghĩa ra class cho label, bạn sẽ làm như sau:

Form::label('email', 'E-Mail Address', ['class' => 'awesome'])

Chú ý: Sau khi tạo ra một label, bất kỳ một thành phần form nào mà bạn tạo ra có 'name' trùng với 'name' của thành phần HTML Collective bạn vừa tạo ra sẽ tự động được gán ID.

II. Text, Text Area, Password & Hidden Fields

Cú pháp để tạo ra một text bằng HTML Collective rất đơn giản: Form::text('username') Để thêm giá trị mặc định cho text, bạn truyền thêm tham số thứ 2 vào như sau: Form::text('email', 'example@gmail.com')

Chú ý: cú pháp tương tự cho textarea và hidden Cú pháp để tạo ra một password cũng khá dễ dàng Form::password('password', ['class' => 'awesome']) Nếu bạn muốn tạo ra placeholder cho một text bạn sẽ khai báo như sau Form::text('email', 'example@gmail.com', ['placeholder' => 'Đây là place holder'])

III. Checkboxes and Radio Buttons

Chẳng còn gì để giới thiệu nữa, cú pháp không khác gì những cái trên )))))

Form::checkbox('name', 'value')
Form::radio('name', 'value')
Form::checkbox('name', 'value', true)
Form::number('name', 'value')

IV. Number

Form::number('name', 'value')

Chú ý: Bạn vẫn có thể nhập các ký tự như "e", ",", *"." *vào nhé, chắc nhiều bạn cũng đã biết điều này, xong nếu bạn còn thắc mắc thì cũng dễ hiểu thôi, 2e cũng được coi là số, hay như 1.5, hoặc 1,000,000 thì cũng được coi là số vậy, vì thế việc nhập những ký tự như trên vào ô number cũng chả có gì là lạ. Và nhớ thêm một điều là từ HTML5 mới hỗ trợ input có type là kiểu number nhé.

IV. Drop-Down Lists

Cú pháp sẽ như sau: Form::select('size', ['L' => 'Large', 'S' => 'Small'], 'S') Rất dễ hiểu ))) size là name của select đó, ta có thể truyền vào trong select một mảng kiểu key - value, ở đây ta đã chỉ định phần tử mặc định cho select đó là 'S'. Nếu bạn muốn tạo ra một placeholder cho select đó bạn có thể khai báo như sau: Form::select('size', ['L' => 'Large', 'S' => 'Small'], null, ['placeholder' => 'Pick a size...']) Hoặc bạn có thể tạo ra một group select như sau

Form::select('animal',[
    'Cats' => ['leopard' => 'Leopard'],
    'Dogs' => ['spaniel' => 'Spaniel'],
])

Ah, thêm thằng này nữa, hỗ trợ đến tận răng luôn )))) Form::selectMonth('month')

V. Custom Macros

Để đăng ký một Macros, bạn khai báo như sau:

Form::macro('myField', function()
{
    return '<input type="awesome">';
})

Và để gọi được Macros trong form, bạn khai báo như sau: Form::myField()

VI. Custom Components

Cách làm việc với Components cũng khá giống với Macros. Tuy nhiên thay vì sử dụng closure để tạo ra HTML, Components sử dụng blade của larravel. Xây dựng một Form Components đơn giản bằng boostrap, bạn phải khai báo nó bên trong Service Provider's boot

Form::component('bsText', 'components.form.text', ['name', 'value', 'attributes'])

Và trang text sẽ xây dựng như sau:

<div class="form-group">
    {{ Form::label($name, null, ['class' => 'control-label']) }}
    {{ Form::text($name, $value, array_merge(['class' => 'form-control'], $attributes)) }}
</div>