Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

laravel-form

Install

Step 1: Install via Composer

$ composer require webup/laravel-form

Step 2: Add the Service Provider

Add this line to config/app.php:

'providers' => [
    //...
    Webup\LaravelForm\FormServiceProvider::class
]

Step 3: Use Facade (optional)

For shorter code, you can use the facade by adding this line to config/app.php:

'aliases' => [
    //...
    'Form'      => Webup\LaravelForm\Facades\Form::class,
]

You can now use Laravel Form directly into your views (check some examples bellow)

Step 4: Publish config

You can publish config and override it in config/form.php:

 php artisan vendor:publish

Using

Methods

These methods can be used with any type of elements:

  • label($label = null, $escape = true)
  • value($value = null)
  • placeholder($placeholder = null)
  • name($name = null)
  • required($showStar = true)
  • errors($errors = [])
  • attr(array $attr = [])
  • wrapperAttr(array $attr = [])
  • wrapperClass($wrapperClass) deprecated use wrapperAttr(['class' => 'myclass'])

Generated HTML

{!! Form::create('text', 'name')
    ->label('Name')
    ->value('Barney')
    ->required()
    ->attr(['maxlenght' => '50'])
    ->wrapperAttr(['class' => 'f-custom-class']) !!}

Without errors:

<div class="f-group f-custom-class">
    <label for="name">Name <i class="f-required">*</i></label>    
    <input type="text" id="name" name="name" value="Barney" maxlength="50">
</div>

With errors (retrieve from Laravel validation):

<div class="f-group f-custom-class f-error">
    <label for="name">Name <i class="f-required">*</i></label>    
    <input type="text" id="name" name="name" value="Barney" maxlength="50">
    <ul class="f-error-message">
        <li>Name is required</li>
    </ul>
</div>

You can override default CSS class in config/form.php.

Important: Laravel Form can handle HTML generation and client side validation only. You need to manage server side validation on your own.

Elements

input

{!! Form::create('email', 'name')
    ->label('Email')
    ->value('homer.simpson@example.com')
    ->placeholder('example@adresse.com')
    ->required()
    ->wrapperAttr(['class' => 'custom-class']) !!}

textarea

{!! Form::create('textarea', 'name')
    ->label('Name')
    ->value('Nullam id dolor id nibh ultricies vehicula ut id elit.') !!}

radio

{!! Form::create('radio', 'gender')->label('Gender')
    ->addRadio(1, 'Male', 'male')
    ->addRadio(0, 'Female', 'female')
    ->wrapperAttr(['class' => 'custom-class'])
    ->value(0) !!}

Specific methods :

  • addRadio($value, $label, $id, $attr = [])

select

{!! Form::create('select', 'fruits')
    ->label("Fruits")
    ->placeholder("What's your favorite?")
    ->addOptions(['apple' => 'Apple', 'strawberry' => 'Strawberry', 'melon' => 'Melon'])
    ->value('apple') !!}

Specific methods :

  • addOptions(array $options)

checkbox

{!! Form::create('checkbox', 'cgu')
    ->label("I accept the general terms and conditions")
    ->value(true) !!}

AntiSpam feature

Honeypot

{!! Form::honeypot("unicorn_mail") !!}

Will create an input text with name='unicorn_mail' within a hidden div (by javascript)

Validation

$request->validate([
    [...]
    'unicorn_mail' => 'honeypot',
]);

TimeTrap

{!! Form::timetrap("unicorn_time") !!}

Will create an input text with name='unicorn_time' and value="{encryptedTimestamp}" within a hidden div (by javascript)

Validation

$request->validate([
    [...]
    'unicorn_time' => 'timetrap:2',
]);

In this example, timetrap time is set to 2 seconds. If no value is set, config form.antiSpam.minFormSubmitTime is taken. Finally if config form.antiSpam.minFormSubmitTime is not set, default value is 3 seconds.

Styling

Bellow, you will find default styles that can work with Laravel Form.

.f-group {
  margin-bottom: 1rem;
}

.f-group label {
  margin-bottom: .5rem;    
}

.f-required {
  color: #c0392b;
  font-weight: bold;
}

.f-error input {
  border: 1px solid #c0392b;
}

.f-error-message {
  margin-top: 4px;
  color: #c0392b;
}

Contributing

Please see CONTRIBUTING and CONDUCT for details.

Credits

Developed by Agence Webup

License

The MIT License (MIT). Please see License File for more information.

You can’t perform that action at this time.