README
This is a package for creating Bootstrap 4 styled form elements in Laravel 5.
Features
- Labels
- Error messages
- Bootstrap 4 markup and classes (including state, colors, and sizes)
- Error validation messages
- Form fill (using Model instance, array or after form submission when a validation error occurs)
- Internationalization
- Add parameters using php chaining approach
- Zero dependences (no Laravel Collective dependency)
Introduction
Before
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control @if($errors->has('username')) is-invalid @endif " id="username" value="{{old('username', $username)}}">
@if($errors->has('username'))
<div class="invalid-feedback">
{{$errors->first('username')}}
</div>
@endif
</div>
After
Form::text('username', 'Username')
Installation
Require the package using Composer.
composer require mediactive-digital/laravel-bootstrap-4-forms
Laravel 5.5 or above
If you is using Laravel 5.5, the auto discovery feature will make everything for you and your job is done, you can start using now. Else, follow the steps below to install.
Laravel 5.4
Add the service provider to your config/app.php file
'providers' => [
//...
NetoJose\Bootstrap4Forms\Bootstrap4FormsServiceProvider::class,
],
Add the BootForm facade to the aliases array in config/app.php:
'aliases' => [
//...
'Form' => NetoJose\Bootstrap4Forms\Bootstrap4FormsFacade::class,
],
Usage
Basic form controls
Opening and closing a form
// Opening a form using POST method
{!!Form::open()!!}
// Opening a form using POST method with specific errors message bag
{!!Form::open('messageBag')!!}
// ... Form components here
// Closing a form
{!!Form::close()!!}
Opening the form will add _token field automatically for you
Inline form
// Making all inputs inline
{!!Form::inlineForm()!!}
Fieldset
| Param |
Type |
Default |
Description |
| $legend |
string |
null |
Fieldset Legend |
| $name |
string |
null |
Fieldset Error |
| $wrap |
bool |
false |
Fieldset Wrap |
// Examples
// Open fieldset
{!!Form::fieldsetOpen()!!}
// Open fieldset with legend
{!!Form::fieldsetOpen('Legend title')!!}
// Open fieldset with error display by field name
{!!Form::fieldsetOpen('Legend title', 'field_name')!!}
// Open fieldset as wrapper (checkbox/radio)
{!!Form::fieldsetOpen('Legend title', 'field_name', true)!!}
// Open fieldset with help text
{!!Form::fieldsetOpen('Legend title')->help('Help')!!}
// Open fieldset with error display by field name and help text
{!!Form::fieldsetOpen('Legend title', 'field_name')->help('Help')!!}
// ... Fieldset content
// Close fieldset
{!!Form::fieldsetClose()!!}
// Close fieldset with error display by field name
{!!Form::fieldsetClose('field_name')!!}
// Close fieldset with help text
{!!Form::fieldsetClose()->help('Help')!!}
// Close fieldset with error display by field name and help text
{!!Form::fieldsetClose('field_name')->help('Help')!!}
Basic inputs
Text inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::text('name', 'User name')!!}
Textarea
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::textarea('description', 'Description')!!}
Select
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $options |
array |
[] |
Select options |
| $default |
string |
null |
Default value |
// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])!!}
Checkbox
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $value |
string |
null |
Input value |
| $default |
boolean |
null |
Default value |
// Example
{!!Form::checkbox('orange', 'Orange')!!}
Radio
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $value |
string |
null |
Input value |
| $default |
boolean |
null |
Default value |
// Example
{!!Form::radio('orange', 'Orange')!!}
File inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
// Example
{!!Form::file('name', 'File name')!!}
Plain text inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::plainText('name', 'User name')!!}
Range inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::range('name', 'Range')!!}
Password inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::password('name', 'Password')!!}
Email inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::email('name', 'Email')!!}
Number inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::email('name', 'Number')!!}
Tel inputs
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $label |
string |
null |
Input label |
| $default |
string |
null |
Default value |
// Example
{!!Form::email('name', 'Tel')!!}
Hidden
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
| $default |
boolean |
null |
Default value |
// Example
{!!Form::hidden('user_id')!!}
Anchor
| Param |
Type |
Default |
Description |
| $value |
string |
null |
Anchor text |
| $url |
string |
null |
Anchor url |
// Example
{!!Form::anchor("Link via parameter", 'foo/bar')!!}
Buttons
| Param |
Type |
Default |
Description |
| $value |
string |
null |
Button value |
| $color |
string |
null |
Button color |
| $size |
string |
null |
button size |
Submit
// Example
{!!Form::submit("Send form")!!}
Button
// Example
{!!Form::button("Do something", "warning", "lg")!!}
Reset
// Example
{!!Form::reset("Clear form")!!}
Chainable methods
This package uses chaining feature, allowing easly pass more parameters.
Filling a form
| Param |
Type |
Default |
Description |
| $data |
object |
array |
null |
// Examples
// With initial data using a Model instance
$user = User::find(1);
{!!Form::open()->fill($user)!!}
// With initial array data
$user = ['name' => 'Jesus', 'age' => 33];
{!!Form::open()->fill($user)!!}
Url
Use in anchors and forms openings
| Param |
Type |
Default |
Description |
| $url |
string |
null |
Url |
// Example
{!!Form::anchor("Link via url")->url('foo/bar')!!}
Route
Use in anchors and forms openings
| Param |
Type |
Default |
Description |
| $route |
string |
null |
Route name |
// Example
{!!Form::anchor("Link via route")->route('home')!!}
Checked
Set the checkbox/radio checked status
| Param |
Type |
Default |
Description |
| $checked |
boolean |
true |
Checked status |
// Examples
// Make checkbox checked
{!!Form::checkbox('agree', 'I agree')->checked()!!}
// You can use FALSE to turn off checked status
{!!Form::checkbox('agree', 'I agree')->checked(false)!!}
Inline
Set the checkbox/radio inline
// Examples
{!!Form::radio('orange', 'Orange')->inline()!!}
{!!Form::checkbox('orange', 'Orange')->inline()!!}
Placeholder
| Param |
Type |
Default |
Description |
| $placeholder |
string |
null |
Placeholder text |
// Example
{!!Form::text('name', 'Name')->placeholder('Input placeholder')!!}
Autocomplete
| Param |
Type |
Default |
Description |
| $autocomplete |
boolean |
true |
Autocomplete status |
// Examples
// Set autocomplete on input
{!!Form::text('name', 'Name')->autocomplete()!!}
// You can use FALSE to turn off autocomplete status
{!!Form::text('name', 'Name')->autocomplete(false)!!}
SrOnly
Set the label sr-only status
| Param |
Type |
Default |
Description |
| $srOnly |
boolean |
true |
SrOnly status |
// Examples
// Set sr-only style on label
{!!Form::text('name', 'Name')->srOnly()!!}
// You can use FALSE to turn off sr-only status
{!!Form::text('name', 'Name')->srOnly(false)!!}
Prepend
Prepend content to input
| Param |
Type |
Default |
Description |
| $prepend |
string |
null |
Input prepend |
// Example
{!!Form::text('name', 'Name')->prepend('Input prepend')!!}
Select Multiple
// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])->multiple()!!}
Locale
Using locale, the package will look for a resources/lang/{CURRENT_LANG}/forms/user.php language file and uses labels and help texts as keys for replace texts
// Example
{!!Form::open()->locale('forms.user')!!}
Help Text
| Param |
Type |
Default |
Description |
| $text |
string |
null |
Help text |
// Example
{!!Form::text('name', 'Name')->help('Help text here')!!}
Custom attributes
| Param |
Type |
Default |
Description |
| $attrs |
array |
[] |
Custom input attributes |
// Example
{!!Form::text('name', 'Name')->attrs(['data-foo' => 'bar', 'rel'=> 'baz'])!!}
Readonly
| Param |
Type |
Default |
Description |
| $status |
boolean |
true |
Read only status |
// Examples
// Using readonly field
{!!Form::text('name', 'Name')->readonly()!!}
// You can use FALSE to turn off readonly status
{!!Form::text('name', 'Name')->readonly(false)!!}
Disabled
| Param |
Type |
Default |
Description |
| $status |
boolean |
true |
Disabled status |
// Examples
// Disabling a field
{!!Form::text('name', 'Name')->disabled()!!}
// Disabling a fieldset
{!!Form::fieldsetOpen('User data')->disabled()!!}
// You can use FALSE to turn off disabled status
{!!Form::text('name', 'Name')->disabled(false)!!}
Required
| Param |
Type |
Default |
Description |
| $status |
boolean |
true |
Required status |
// Examples
// Make a field required
{!!Form::text('name', 'Name')->required()!!}
// Make a fieldset required
{!!Form::fieldsetOpen('User data')->required()!!}
// You can use FALSE to turn off required status
{!!Form::text('name', 'Name')->required(false)!!}
Block
| Param |
Type |
Default |
Description |
| $status |
boolean |
true |
Disabled status |
// Examples
// Set block style on a field
{!!Form::text('name', 'Name')->block()!!}
// You can use FALSE to turn off block status
{!!Form::text('name', 'Name')->block(false)!!}
Simple
| Param |
Type |
Default |
Description |
| $simple |
boolean |
true |
Simple status |
// Examples
// Set simple status for a button
{!!Form::button('Button')->simple()!!}
// Set simple status for an anchor
{!!Form::anchor('Anchor')->simple()!!}
// You can use FALSE to turn off simple status
{!!Form::button('Button')->simple(false)!!}
Id
| Param |
Type |
Default |
Description |
| $id |
string |
null |
Field id |
// Example
{!!Form::text('name', 'Name')->id('user-name')!!}
Class
| Param |
Type |
Default |
Description |
| $class |
string |
null |
Field class |
// Example
{!!Form::text('name', 'Name')->class('class')!!}
Wrapper class
| Param |
Type |
Default |
Description |
| $class |
string |
null |
Wrapper class |
// Example
{!!Form::text('name', 'Name')->wrapperClass('class')!!}
Label class
| Param |
Type |
Default |
Description |
| $class |
string |
null |
Label class |
// Example
{!!Form::text('name', 'Name')->labelClass('class')!!}
Id prefix
| Param |
Type |
Default |
Description |
| $prefix |
string |
null |
Id prefix |
// Example
{!!Form::open()->idPrefix('register')!!}
General class
| Param |
Type |
Default |
Description |
| $class |
string |
null |
General class |
// Example
{!!Form::open()->generalClass('class')!!}
Multipart
| Param |
Type |
Default |
Description |
| $multipart |
boolean |
true |
Multipart flag |
// Examples
{!!Form::open()->multipart()!!}
// You can use FALSE to turn off multipart
{!!Form::open()->multipart(false)!!}
Method
| Param |
Type |
Default |
Description |
| $method |
string |
null |
HTTP method |
// Examples
{!!Form::open()->method('get')!!}
{!!Form::open()->method('post')!!}
{!!Form::open()->method('put')!!}
{!!Form::open()->method('patch')!!}
{!!Form::open()->method('delete')!!}
explicit HTTP verbs
// Examples
{!!Form::open()->get()!!}
{!!Form::open()->post()!!}
{!!Form::open()->put()!!}
{!!Form::open()->patch()!!}
{!!Form::open()->delete()!!}
Color
| Param |
Type |
Default |
Description |
| $color |
string |
null |
Color name |
// Examples
{!!Form::button("Do something")->color("warning")!!}
{!!Form::button("Do something")->color("primary")!!}
explicit color
// Examples
{!!Form::button("Button label")->warning()!!}
{!!Form::button("Button label")->outline()!!}
{!!Form::button("Button label")->success()!!
{!!Form::button("Button label")->danger()!!}
{!!Form::button("Button label")->secondary()!!}
{!!Form::button("Button label")->info()!!}
{!!Form::button("Button label")->light()!!}
{!!Form::button("Button label")->dark()!!}
{!!Form::button("Button label")->link()!!}
Size
| Param |
Type |
Default |
Description |
| $size |
string |
null |
Size name |
// Examples
{!!Form::button("Do something")->size("sm")!!}
{!!Form::button("Do something")->size("lg")!!}
Explicit size
// Examples
{!!Form::button("Button label")->sm()!!}
{!!Form::button("Button label")->lg()!!}
Type
| Param |
Type |
Default |
Description |
| $type |
string |
null |
Type field |
// Examples
// Password field
{!!Form::text('password', 'Your password')->type('password')!!}
// Number field
{!!Form::text('age', 'Your age')->type('number')!!}
// Email field
{!!Form::text('email', 'Your email')->type('email')!!}
Name
| Param |
Type |
Default |
Description |
| $name |
string |
null |
Input name |
// Examples
{!!Form::text('text')->name('name')!!}
Label
| Param |
Type |
Default |
Description |
| $label |
string |
null |
Input label |
// Examples
{!!Form::text('age')->label('Your age')!!}
Default Value
| Param |
Type |
Default |
Description |
| $value |
mixed |
null |
Input value |
// Example
{!!Form::text('name', 'Your name')->value('Maria')!!}
Render
| Param |
Type |
Default |
Description |
| $render |
string |
null |
Render name |
// Examples
// Number field
{!!Form::render('text')->name('age')->label('Your age')!!}
Chaining properties
You can use chaining feature to use a lot of settings for each component
// Examples
{!!Form::open()->locale('forms.user')->put()->multipart()->route('user.add')->data($user)!!}
{!!Form::text('name', 'Name')->placeholder('Type your name')->lg()!!}
{!!Form::anchor("Link as a button")->sm()->info()->outline()!!}
{!!Form::submit('Awesome button')->id('my-btn')->disabled()->danger()->lg()!!}
{!!Form::close()!!}