webup / laravel-form
A Laravel package to help build forms.
Installs: 6 878
Dependents: 1
Suggesters: 0
Security: 0
Stars: 14
Watchers: 8
Forks: 4
Open Issues: 1
pkg:composer/webup/laravel-form
Requires
- php: >=5.3.0
- illuminate/support: ~5.1|^6.0|^7.0|^8.0|^9.0|^10.0|^11.0
Requires (Dev)
- phpunit/phpunit: 4.*
- scrutinizer/ocular: ~1.1
README
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) !!}
You can use ->attr(['value' => '1']) to change the value of the checkbox
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.