Close

Laravel Collective 5 – HTML Form Builder for Laravel 5

Laravel Collective 5 - HTML Form Builder for Laravel 5

 

What is Laravel Collective?

Basically Laravel Collective is a package for Laravel 5.0+ to generate HTML form by using a set of shortcodes. It is simple and easy to be integrated into any Laravel 5 project.

Why should I use Laravel Collective?

Why you need this package when Laravel 5 is having blade template engine? Well, imagine you are developing a website or system that required large number of input source such as textbox, radio buttons, checkbox fields, dropdown list and textarea, and you are writing raw HTML code in one blade file along with blade syntax such as old(“value”) to retains previous input text, checked radio, selected dropdown item and etc. It cause a lot of mess in blade template or its definitely cause developer spend more time to modify HTML codes.

This is the example of what we always seen in Laravel 5 blade template:

<input type="text" name="username" class="form-group user-email" placeholder="Username" value="{{ old("username") ? old("username") : (!empty($user) ? $user->username : null) }}">

Isn’t it lengthy and spend more time to modify code? Let’s look at shortcode example:

{{Form::text("username", 
             old("username") ? old("username") : (!empty($user) ? $user->username : null),
             [
                "class" => "form-group user-email",
                "placeholder" => "Username",
             ])
}}

Now it look better and easier to maintain by changing the parameters in Laravel Collective shortcode.

 

Steps for installation

    1. Open command prompt / terminal and find project path.
    2. run
      composer require&nbsp;laravelcollective/html
    3. Next, add your new provider to the providers array of config/app.php:
      'providers' => [
          // ...
          Collective\Html\HtmlServiceProvider::class,
          // ...
        ],
    4. Finally, add two class aliases to the aliases array of config/app.php:
      'aliases' => [
          // ...
            'Form' => Collective\Html\FormFacade::class,
            'Html' => Collective\Html\HtmlFacade::class,
          // ...
        ],
      

    Congratulations! You are installed Laravel Collective successfully! Below are the shortcodes that you can generate for your Laravel 5 project(s)

Shortcode List:

Opening a new form example:

 

Example with PUT method

{!! Form::open(array('url' => 'foo/bar','method' => 'PUT')) !!}
    //
{!! Form::close() !!}

*For POST/GET/DELETE method, you just have to change PUT to any method you want.

Example with parameter for route. Most cases are sending unique ID to controller

{!! Form::open(array('url' => 'foo/bar/'.$id,'method' => 'PUT')) !!}
    //
{!! Form::close() !!}

Example with parameter for route name./strong>

{!! Form::open(array('url' => route('post.show', ['id' => $id]),'method' => 'PUT')) !!}
    //
{!! Form::close() !!}

Textbox

{{Form::text("username", 
             old("username") ? old("username") : (!empty($user) ? $user->username : null),
             [
                "class" => "form-group user-email",
                "placeholder" => "Username",
             ])
}}

Password

*Password do not have default value!

{{Form::password("password", 
             [
                "class" => "form-group",
                "placeholder" => "Your Password",
             ])
}}

Textarea

*Password do not have default value!

{{Form::textarea("description", old("description") ? old("description") : (!empty($user) ? $user->description : null), 
             [
                "class" => "form-group",
             ])
}}

File Upload

*File field do not have default value!

{{Form::file("profile-image",
             [
                "class" => "form-group",
             ])
}}

Checkbox

{{Form::checkbox("item","value",true
             [
                "class" => "form-group",
             ])
}}

*value is the checkbox value and true if it check / false if it uncheck

More example for checkbox array:

@for($i = 0; $i < 10; $i++) {{Form::checkbox("item[]","value".$i ,false [ "class" => "form-group",
             ])
}}
@endforeach

Example above will generate 10 checkbox with array.

Radio Button

{{Form::radio("item","value",true
             [
                "class" => "form-group",
             ])
}}

*value is the radio value and true if it check / false if it uncheck

More example for radio array:

@for($i = 0; $i < 10; $i++) {{Form::radio("item[]","value".$i ,false [ "class" => "form-group",
             ])
}}
@endforeach

Example above will generate 10 radio with array.

Select Dropdown List

{{Form::select("size",['L' => 'Large', 'S' => 'Small'], null,
             [
                "class" => "form-group",
                "placeholder" => "Pick a size..."
             ])
}}

* you can change null to any dropdown value. For example: “L” / “S”

Submit Button

{{Form::submit('Submit Form')}}

Label

{{ Form::label("Username", null, ['class' => 'control-label']) }}
Hit Enter