mediactive-digital/laravel-bootstrap-4-forms

Bootstrap 4 form builder for Laravel 5

Maintainers

Details

github.com/mediactive-digital/laravel-bootstrap-4-forms

Source

Installs: 1 143

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 2

Forks: 60

Type:package

2.1.1 2019-01-31 11:20 UTC

MIT 365955c34130bfdb068267d112fb9fc1ca1c9855

  • Mediactive Digital

packagephpbootstrapcomposerFormslaravelform-builder

This package is auto-updated.

Last update: 2024-04-05 19:51:39 UTC

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