Laravel Casts

Form builder for Laravel.
Alternatives To Laravel Casts
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Filament6,841
13 hours ago13mitPHP
Admin panel, form builder and table builder for Laravel. Built with the TALL stack. Designed for humans.
No Captcha1,6774003110 days ago30September 10, 202048mitPHP
No CAPTCHA reCAPTCHA For Laravel.
Laravel Form Builder1,67122950a month ago85April 08, 2022111mitPHP
Laravel Form builder for version 5+!
Laravel Schematics1,393
5 months ago43March 21, 202027mitVue
A Laravel package making a diagram of your models, relations and the ability to build them with it
Former1,331425292 months ago63June 02, 20217PHP
A powerful form builder, for Laravel and other frameworks (stand-alone too)
Laravel Honeypot1,10110192 months ago27May 12, 2022mitPHP
Preventing spam submitted through forms
Rapyd Laravel875949a year ago106January 10, 2021116mitPHP
rapyd: crud widgets for laravel. datatable, grids, forms, in a simple package
Form Backend Validation79519516a year ago36July 17, 2020mitJavaScript
An easy way to validate forms using back end logic
Tall Forms64112 months ago120March 11, 20225mitPHP
Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.
Laravel Html62789264 months ago68January 14, 2022mitPHP
Painless html generation
Alternatives To Laravel Casts
Select To Compare


Alternative Project Comparisons
Readme

Casts for Laravel

Join the chat at https://gitter.im/GeneaLabs/laravel-casts Travis SensioLabs Insight Scrutinizer Coveralls GitHub (pre-)release Packagist GitHub license

Casts for Laravel masthead image.

Requirements

  • PHP >= 7.1.3
  • Laravel >= 5.5
  • jQuery needs to be already loaded in your project
  • Bootstrap JS (3 or 4) needs to be already loaded, if being used

Rationale

This package is an effort to streamline and make form development more efficient in Laravel Blade views.

Features

  • Support for common CSS frameworks. (At this time only Bootstrap 3 and Bootstrap 4.beta, more coming soon.)
  • Blade directives for elegant Blade view integration, providing concise syntax, reducing form boilerplate 10-fold.
  • DateTime Picker for Bootstrap 3.

Installation

  1. Install the package:
composer require genealabs/laravel-casts
  1. Publish the required assets:
php artisan casts:publish --assets

Usage

The following shows all elements using Bootstrap 3:

screen shot 2017-03-03 at 7 53 47 am

Blade Directives

The following Blade directives developing forms a snap:

@form(['url' => ''])
    @errors("intro text", ["html" => "attributes"])
    @text('text', '', ['placeholder' => 'Placeholder Text', 'label' => 'Text Input'])
    @number('number', '', ['placeholder' => 'Placeholder Text', 'label' => 'Number Input'])
    @password('password', ['placeholder' => 'Placeholder Text', 'label' => 'Password Input'])
    @date('date', '', ['placeholder' => 'Placeholder Text', 'label' => 'Date'])
    @datetime('datetime', '', ['placeholder' => 'Placeholder Text', 'label' => 'DateTime'])
    @email('email', '', ['placeholder' => 'Placeholder Text', 'label' => 'Email Input'])
    @url('url', '', ['placeholder' => 'Placeholder Text', 'label' => 'Url Input'])
    @search ('search', 'search term', ['placeholder' => 'Placeholder Text', 'label' => 'Search Input'])
    @color ('color', '#ff0000', ['placeholder' => 'Placeholder Text', 'label' => 'Color Input'])
    @range ('range', 5, ['placeholder' => 'Placeholder Text', 'label' => 'Range Input'])
    @tel ('tel', '1234567890', ['placeholder' => 'Placeholder Text', 'label' => 'Tel Input'])
    @week ('week', 3, ['placeholder' => 'Placeholder Text', 'label' => 'Week Input'])
    @month ('month', 'January', ['placeholder' => 'Placeholder Text', 'label' => 'Month Input'])
    @file('file', ['placeholder' => 'Placeholder Text', 'label' => 'File Input'])
    @textarea('textarea', '', ['placeholder' => 'Placeholder Text', 'label' => 'Textarea', 'rows' => 7])
    @checkbox('checkbox', 'test', true, ['placeholder' => 'Placeholder Text', 'label' => 'Checkbox'])
    @radio('radio', 'test', true, ['placeholder' => 'Placeholder Text', 'label' => 'Radio'])
    @switch('fieldname', 'true value', $isChecked, ['label' => 'Switch', 'label' => 'Switch', 'onText' => 'Available', 'onColor' => 'success', 'offText' => 'Unavailable', 'offColor' => 'danger'])
    @select('select', [1, 2, 3, 4], null, ['placeholder' => 'Placeholder Text', 'label' => 'Select'])
    @selectMonths('select_months', null, ['placeholder' => 'Placeholder Text', 'label' => 'Select'])
    @selectWeekdays('select_weekdays', null, ['placeholder' => 'Placeholder Text', 'label' => 'Select Weekdays']) @selectRange('selectRange', 1, 21, null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Select Range'])
    @selectRangeWithInterval('selectRangeWithInterval', 1, 21, 3, null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Select Range With Interval'])
    @combobox('combobox', [1, 2, 3, 4], null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Combobox'])
    @submit('submit', ['class' => 'btn btn-success', 'label' => 'Submit Button'])
@endform

@form / {!! Form::open() !!}

@form ($model, ['class' => '', 'labelWidth' => '', 'fieldWidth' => '', 'framework' => ''])
  • $model: (optional) used to pre-populate a model-based form.
  • class: (optional)
  • offset: (optional, default: 3)
  • labelWidth: (optional, default: 3)
  • fieldWidth: (optional, default: 9)
  • framework: (optional)

@errors / {!! Form::errors() !!}

@errors (string $intro = "", array $options = [])
  • $intro: an optional brief pre-text to the errors list.
  • $options: (default: []) will be rendered as html tag attributes.

@label / {!! Form::label() !!}

@label ($name, $label = null, array $options = [], $escapeHtml = true)
  • $name: used for the for= attribute on the label.
  • $label: (default: null) the label text.
  • $options: (default: []) array of options, including class.
  • $escapeHtml: (default: true) set this to false if your label should render HTML.

Note: labels are rendered automatically when using frameworks.

Input controls

The following controls use the same syntax:

  • @text / {!! Form::text() !!}
  • @date / {!! Form::date() !!}
  • @datetime / {!! Form::datetime() !!}
  • @email / {!! Form::email() !!}
  • @url / {!! Form::url() !!}
  • @textarea / {!! Form::textarea() !!}
@text ($name, $value = null, $options = [])
  • $name: name of the control, used to submit form values.
  • $value: (default: null) value of the control, if you need to prepopulate it. It will automatically populate old form values if validation fails.
  • $options: (default: []) array of options, including class.

@switch / {!! Form::switch() !!}

@switch ('fieldname', 'active value', $isActivated, [label' => 'Switch', 'onText' => 'Available', 'offText' => 'Unavailable', 'onColor' => 'success', 'offColor' => 'danger'])

@select / {!! Form::select() !!}

@select ($name, $list = [], $selected = null, $options = [])
  • $name: name of the control, used to submit form values.
  • $list: (default: []) array of key-value pairs used to create the select list options.
  • $selected: (default: null) the value of the selected options.
  • $options: (default: []) array of options, including class.

@selectMonths / {!! Form::selectMonths() !!}

@selectMonths ($name, $selected = null, $options = [])
  • $name: name of the control, used to submit form values.
  • $selected: (default: null) the value of the selected options.
  • $options: (default: []) array of options, including class.

@selectWeekdays / {!! Form::selectWeekdays() !!}

@selectWeekdays ($name, $selected = null, $options = [])
  • $name: name of the control, used to submit form values.
  • $selected: (default: null) the value of the selected options.
  • $options: (default: []) array of options, including class.

@selectRangeWithInterval / {!! Form::selectRangeWithInterval() !!}

@selectRangeWithInterval(string $name, int $start, int $end, int $interval, int $value = null, array $options = [])
  • $name: name of the control, used to submit form values.
  • $start: starting value of the list.
  • $end: ending value of the list.
  • $interval: interval value.
  • $value: selected value.
  • $options: (default: []) array of options, including class.

CSS Framework Support

Taking advantage of framework support will handle all error validation presentation, as well as generation of labels and all the necessary form control boilerplate.

Additional framework support is planned, possibly including:

  • Foundation
  • Skeleton
  • Semantic UI

If there's a framework you would like included, feel free to reach out by opening an issue with the pertinent details.

Bootstrap 3

To have a form render for Bootstrap 3, specify the framework and form orientation in the @form directive:

@form(['url' => '', 'class' => 'form-horizontal', 'framework' => 'bootstrap3'])

Additionally, to enable the date/time picker, add the following to your JavaScript file for the page rendering the date fields:

if (window.$) {
    $(function () {
        if ( $.isFunction($.fn.datetimepicker) ) {
            $('input[type=date]').datetimepicker({
                format: 'LL'
            });

            $('input[type=datetime]').datetimepicker({
                format: 'LLL',
                sideBySide: true
            });
        }
    });
}

You can include the library using Gulp and NPM (preferred), or use a CDN.

Gulp / NPM
  1. npm install save-dev bootstrap-datetimepicker-npm
  2. Then require the library in your /resources/assets/js/app.js file (after jQuery and Bootstrap have been required):
require('bootstrap-datetimepicker-npm');
  1. Don't forget to include the CSS as well in /resources/assets/sass/app.sass:
// DateTimePicker
@import "./node_modules/bootstrap-datetimepicker-npm/src/sass/bootstrap-datetimepicker-build";
  1. Finally, edit your /gulpfile.js as needed, and run gulp.
CDNs

Add the following references to the page(s) or your main layout file. You will need to have jQuery and Bootstrap libraries included as well.

<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css">
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
    </body>
</html>

Bootstrap 4 (alpha 3)

Nearly the same as above:

@form(['url' => '', 'class' => 'form-horizontal', 'framework' => 'bootstrap4'])

Testing

  • Add the following entry to your phpunit.xml config file:
      <directory suffix="Test.php">./vendor/genealabs/laravel-casts/tests</directory>

- Run `vendor/bin/phpunit` from the base directory of your project.
Popular Laravel Projects
Popular Form Projects
Popular Frameworks Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Php
Laravel
Bootstrap
Form
Tailwindcss
Blade