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

// 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

// Example
{!!Form::text('name', 'User name')!!}

Textarea

// Example
{!!Form::textarea('description', 'Description')!!}

Select

// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])!!}

Checkbox

// Example
{!!Form::checkbox('orange', 'Orange')!!}

Radio

// Example
{!!Form::radio('orange', 'Orange')!!}

File inputs

// Example
{!!Form::file('name', 'File name')!!}

Plain text inputs

// Example
{!!Form::plainText('name', 'User name')!!}

Range inputs

// Example
{!!Form::range('name', 'Range')!!}

Password inputs

// Example
{!!Form::password('name', 'Password')!!}

Email inputs

// Example
{!!Form::email('name', 'Email')!!}

Number inputs

// Example
{!!Form::email('name', 'Number')!!}

Tel inputs

// Example
{!!Form::email('name', 'Tel')!!}

Hidden

// Example
{!!Form::hidden('user_id')!!}

Anchor

// Example
{!!Form::anchor("Link via parameter", 'foo/bar')!!}

Buttons

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

// 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

// Example
{!!Form::anchor("Link via url")->url('foo/bar')!!}

Route

Use in anchors and forms openings

// Example
{!!Form::anchor("Link via route")->route('home')!!}

Checked

Set the checkbox/radio 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

// Example
{!!Form::text('name', 'Name')->placeholder('Input placeholder')!!}

Autocomplete

// 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

// 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

// 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

// Example
{!!Form::text('name', 'Name')->help('Help text here')!!}

Custom attributes

// Example
{!!Form::text('name', 'Name')->attrs(['data-foo' => 'bar', 'rel'=> 'baz'])!!}

Readonly

// 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

// 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

// 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

// 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

// 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

// Example
{!!Form::text('name', 'Name')->id('user-name')!!}

Class

// Example
{!!Form::text('name', 'Name')->class('class')!!}

Wrapper class

// Example
{!!Form::text('name', 'Name')->wrapperClass('class')!!}

Label class

// Example
{!!Form::text('name', 'Name')->labelClass('class')!!}

Id prefix

// Example
{!!Form::open()->idPrefix('register')!!}

General class

// Example
{!!Form::open()->generalClass('class')!!}

Multipart

// Examples
{!!Form::open()->multipart()!!}

// You can use FALSE to turn off multipart
{!!Form::open()->multipart(false)!!}

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

// 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

// 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

// 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

// Examples
{!!Form::text('text')->name('name')!!}

Label

// Examples
{!!Form::text('age')->label('Your age')!!}

Default Value

// Example
{!!Form::text('name', 'Your name')->value('Maria')!!}

Render

// 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()!!}